tulih-editor 0.1.0

package/src/plugins/imageTools.ts

@@ -0,0 +1,344 @@
+import type { Plugin, PluginContext } from '../types';
+
+const imageTools: Plugin = {
+  name: 'imageTools',
+  order: 56,
+  deps: ['image', 'imageProps'],
+  css: '' +
+    '.te-image-tools {' +
+    '  position: absolute; display: none; z-index: 2000;' +
+    '  background: #fff; border: 1px solid #dee2e6;' +
+    '  border-radius: .375rem; box-shadow: 0 6px 20px rgba(0,0,0,.15);' +
+    '  padding: .375rem; gap: .25rem; align-items: center;' +
+    '}' +
+    '.te-image-tools .btn { padding: .2rem .4rem; font-size: .8rem; }' +
+    '.te-image-tools svg, .te-image-tools i { pointer-events: none; }' +
+    '.te-image-tools .te-image-tools-alt {' +
+    '  width: 130px; height: 26px; font-size: .8rem;' +
+    '  padding: 0 .35rem; border: 1px solid #dee2e6; border-radius: .25rem;' +
+    '}' +
+    '.te-image-tools .te-image-tools-alt:focus { outline: none; border-color: #86b7fe; box-shadow: 0 0 0 2px rgba(13,110,253,.25); }' +
+    '.te-image-tools .te-divider-v {' +
+    '  width: 1px; height: 20px; background: #dee2e6;' +
+    '}' +
+    '.te-image-tools .active { background: #e7f1ff; border-color: #b6d4fe; }' +
+    '.te-editor img.te-focused {' +
+    '  outline: 3px solid rgba(13,110,253,.4);' +
+    '  outline-offset: 1px;' +
+    '}' +
+    '.te-image-resize {' +
+    '  position: absolute; display: none; z-index: 2001;' +
+    '  width: 10px; height: 10px;' +
+    '  background: #0d6efd; border: 2px solid #fff;' +
+    '  border-radius: 50%; cursor: nwse-resize;' +
+    '  box-shadow: 0 1px 4px rgba(0,0,0,.3);' +
+    '}' +
+    '.te-image-resize:hover { transform: scale(1.2); }' +
+    '.te-figure {' +
+    '  display: inline-block; margin: .5rem 0;' +
+    '  text-align: center; max-width: 100%;' +
+    '}' +
+    '.te-figure figcaption {' +
+    '  font-size: .85rem; color: #6c757d;' +
+    '  padding: .25rem .5rem; font-style: italic;' +
+    '}',
+  init(ctx: PluginContext): void {
+    if(!ctx.features.image || !ctx.features.imageTools) return;
+
+    var wrapper = ctx.wrapper;
+    var editor = ctx.editor;
+    var currentImage: HTMLImageElement | null = null;
+
+    var tools = document.createElement('div');
+    tools.className = 'te-image-tools';
+    tools.innerHTML = '' +
+      '<input type="text" class="te-image-tools-alt" placeholder="Alt text" title="Alt text (Enter to apply)" />' +
+      '<div class="te-divider-v"></div>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-image="align-default" title="Inline"><i class="ti ti-align-left"></i></button>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-image="align-left" title="Float left"><i class="ti ti-align-left"></i></button>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-image="align-center" title="Center"><i class="ti ti-align-center"></i></button>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-image="align-right" title="Float right"><i class="ti ti-align-right"></i></button>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-image="caption" title="Caption (toggle)"><i class="ti ti-typography"></i></button>' +
+      '<div class="te-divider-v"></div>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-image="width-100" title="Width 100%">100%</button>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-image="width-75" title="Width 75%">75%</button>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-image="width-50" title="Width 50%">50%</button>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-image="width-orig" title="Original size">Orig</button>' +
+      '<div class="te-divider-v"></div>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-image="border" title="Toggle border">Brdr</button>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-image="rounded" title="Toggle rounded corners">Rnd</button>' +
+      '<div class="te-divider-v"></div>' +
+      '<button type="button" class="btn btn-sm btn-outline-secondary" data-te-image="props" title="Image Properties"><i class="ti ti-settings"></i></button>' +
+      '<button type="button" class="btn btn-sm btn-outline-danger" data-te-image="delete" title="Delete image"><i class="ti ti-x"></i></button>';
+    document.body.appendChild(tools);
+
+    var resizeHandle = document.createElement('div');
+    resizeHandle.className = 'te-image-resize';
+    document.body.appendChild(resizeHandle);
+
+    function getAlign(img: HTMLImageElement): string {
+      var st = img.style;
+      if(st.float === 'left') return 'left';
+      if(st.float === 'right') return 'right';
+      if(st.display === 'block' && st.marginLeft === 'auto' && st.marginRight === 'auto') return 'center';
+      return 'default';
+    }
+
+    function setAlign(img: HTMLImageElement, align: string): void {
+      if(align === 'default'){
+        img.style.float = '';
+        img.style.display = '';
+        img.style.marginLeft = '';
+        img.style.marginRight = '';
+      } else if(align === 'left'){
+        img.style.float = 'left';
+        img.style.display = '';
+        img.style.marginLeft = '0';
+        img.style.marginRight = '1em';
+      } else if(align === 'right'){
+        img.style.float = 'right';
+        img.style.display = '';
+        img.style.marginLeft = '1em';
+        img.style.marginRight = '0';
+      } else if(align === 'center'){
+        img.style.float = '';
+        img.style.display = 'block';
+        img.style.marginLeft = 'auto';
+        img.style.marginRight = 'auto';
+      }
+    }
+
+    function clearImageFocus(): void {
+      if(!editor) return;
+      var prev = editor.querySelector('.te-focused') as HTMLElement | null;
+      if(prev) prev.classList.remove('te-focused');
+    }
+
+    function showResizeHandle(img: HTMLImageElement): void {
+      var rect = img.getBoundingClientRect();
+      resizeHandle.style.left = (window.scrollX + rect.right - 5) + 'px';
+      resizeHandle.style.top = (window.scrollY + rect.bottom - 5) + 'px';
+      resizeHandle.style.display = 'block';
+    }
+
+    function updateAlignBtns(img: HTMLImageElement): void {
+      var align = getAlign(img);
+      tools.querySelectorAll('[data-te-image^="align-"]').forEach(function(b){
+        b.classList.toggle('active', b.getAttribute('data-te-image') === 'align-' + align);
+      });
+    }
+
+    function posTools(img: HTMLImageElement): void {
+      var rect = img.getBoundingClientRect();
+      var altInp = tools.querySelector('.te-image-tools-alt') as HTMLInputElement | null;
+      if(altInp) altInp.value = img.getAttribute('alt') || '';
+      tools.style.display = 'flex';
+      tools.style.left = (window.scrollX + rect.left) + 'px';
+      tools.style.visibility = 'hidden';
+      var toolsH = tools.offsetHeight;
+      var editorRect = wrapper.getBoundingClientRect();
+      var below = rect.bottom + 6 + toolsH;
+      var above = rect.top - 6 - toolsH;
+      if(below > editorRect.bottom && above > editorRect.top){
+        tools.style.top = (window.scrollY + rect.top - 6 - toolsH) + 'px';
+      } else {
+        tools.style.top = (window.scrollY + rect.bottom + 6) + 'px';
+      }
+      tools.style.visibility = '';
+      showResizeHandle(img);
+      updateAlignBtns(img);
+      var capBtn = tools.querySelector('[data-te-image="caption"]');
+      if(capBtn) capBtn.classList.toggle('active', !!(img.parentNode && (img.parentNode as Element).tagName === 'FIGURE'));
+      var brdrBtn = tools.querySelector('[data-te-image="border"]');
+      if(brdrBtn){
+        var b = img.style.border || '';
+        brdrBtn.classList.toggle('active', !!(b && b !== 'none'));
+      }
+      var rndBtn = tools.querySelector('[data-te-image="rounded"]');
+      if(rndBtn){
+        var r = img.style.borderRadius || '';
+        rndBtn.classList.toggle('active', !!(r && r !== '0px' && r !== ''));
+      }
+    }
+
+    function hideTools(): void {
+      tools.style.display = 'none';
+      resizeHandle.style.display = 'none';
+      clearImageFocus();
+      currentImage = null;
+    }
+
+    editor.addEventListener('click', function(e: MouseEvent){
+      var img = e.target && ((e.target as Element).closest ? (e.target as Element).closest('img') : null) as HTMLImageElement | null;
+      if(img && wrapper.contains(img)){
+        e.stopPropagation();
+        currentImage = img;
+        clearImageFocus();
+        img.classList.add('te-focused');
+        img.setAttribute('tabindex', '-1');
+        try { img.focus({preventScroll: true}); } catch(_){ }
+        posTools(img);
+      } else {
+        if(!tools.contains(e.target as Node) && e.target !== resizeHandle){
+          hideTools();
+        }
+      }
+    });
+
+    editor.addEventListener('dblclick', function(){
+      hideTools();
+    });
+
+    document.addEventListener('selectionchange', function(){
+      if(!currentImage) return;
+      if(document.activeElement !== currentImage &&
+         !tools.contains(document.activeElement)){
+        var sel = window.getSelection();
+        if(!sel || sel.isCollapsed){
+          hideTools();
+        }
+      }
+    });
+
+    tools.addEventListener('click', function(e: MouseEvent){
+      var actionBtn = e.target && (e.target as Element).closest('[data-te-image]') as HTMLElement | null;
+      var action = actionBtn && actionBtn.getAttribute('data-te-image');
+      if(!action || !currentImage) return;
+      e.preventDefault();
+      e.stopPropagation();
+
+      if(action === 'width-100'){
+        currentImage.setAttribute('width', '100%');
+        if(currentImage.style) currentImage.style.maxWidth = '100%';
+        posTools(currentImage);
+      }
+      else if(action === 'width-75'){
+        currentImage.setAttribute('width', '75%');
+        posTools(currentImage);
+      }
+      else if(action === 'width-50'){
+        currentImage.setAttribute('width', '50%');
+        posTools(currentImage);
+      }
+      else if(action === 'width-orig'){
+        currentImage.removeAttribute('width');
+        currentImage.removeAttribute('height');
+        if(currentImage.style) currentImage.style.maxWidth = '';
+        posTools(currentImage);
+      }
+      else if(action === 'delete'){
+        var parent = currentImage.parentNode;
+        if(parent) parent.removeChild(currentImage);
+        hideTools();
+      }
+      else if(action === 'props'){
+        var dblClick = new MouseEvent('dblclick', { bubbles: true });
+        currentImage.dispatchEvent(dblClick);
+        hideTools();
+      }
+      else if(action.indexOf('align-') === 0){
+        var a = action.replace('align-', '');
+        setAlign(currentImage, a);
+        updateAlignBtns(currentImage);
+        posTools(currentImage);
+      }
+      else if(action === 'border'){
+        var curBorder = currentImage.style.border || '';
+        if(curBorder && curBorder !== 'none'){
+          currentImage.style.border = '';
+          currentImage.removeAttribute('border');
+        } else {
+          currentImage.style.border = '2px solid #dee2e6';
+        }
+        posTools(currentImage);
+      }
+      else if(action === 'rounded'){
+        var curRadius = currentImage.style.borderRadius || '';
+        if(curRadius && curRadius !== '0px'){
+          currentImage.style.borderRadius = '';
+        } else {
+          currentImage.style.borderRadius = '8px';
+        }
+        posTools(currentImage);
+      }
+      else if(action === 'caption'){
+        var fig = currentImage.parentNode as Element | null;
+        if(fig && fig.tagName === 'FIGURE' && fig.classList.contains('te-figure')){
+          var parent = fig.parentNode;
+          var img = fig.querySelector('img') || fig.querySelector('figcaption');
+          if(img){
+            parent!.insertBefore(img, fig);
+            parent!.removeChild(fig);
+          }
+        } else {
+          var figure = document.createElement('figure');
+          figure.className = 'te-figure';
+          var caption = document.createElement('figcaption');
+          caption.textContent = 'Caption';
+          currentImage.parentNode!.insertBefore(figure, currentImage);
+          figure.appendChild(currentImage);
+          figure.appendChild(caption);
+          caption.contentEditable = 'true';
+        }
+        posTools(currentImage);
+      }
+    });
+
+    tools.addEventListener('keydown', function(e: KeyboardEvent){
+      if(e.key === 'Enter' && currentImage){
+        var altInp = tools.querySelector('.te-image-tools-alt') as HTMLInputElement | null;
+        if(altInp){
+          var val = altInp.value.trim();
+          if(val) currentImage.setAttribute('alt', val);
+          else currentImage.removeAttribute('alt');
+        }
+      }
+    });
+
+    var resizeData: { startX: number; parentW: number; startPct: number; startH: number } | null = null;
+    resizeHandle.addEventListener('mousedown', function(e: MouseEvent){
+      e.preventDefault();
+      e.stopPropagation();
+      if(!currentImage) return;
+      var parentW = currentImage.parentNode ? (currentImage.parentNode as HTMLElement).clientWidth : currentImage.clientWidth;
+      var currentPct = ((currentImage.clientWidth / parentW) * 100);
+      var rect = currentImage.getBoundingClientRect();
+      resizeData = {
+        startX: e.clientX,
+        parentW: parentW,
+        startPct: currentPct,
+        startH: rect.height
+      };
+      document.addEventListener('mousemove', onResize);
+      document.addEventListener('mouseup', onResizeEnd);
+    });
+
+    function onResize(e: MouseEvent): void {
+      if(!resizeData || !currentImage) return;
+      var dx = e.clientX - resizeData.startX;
+      var pctDelta = (dx / resizeData.parentW) * 100;
+      var newPct = Math.max(5, resizeData.startPct + pctDelta);
+      currentImage.style.width = newPct + '%';
+      currentImage.style.height = 'auto';
+      currentImage.removeAttribute('width');
+      currentImage.removeAttribute('height');
+      showResizeHandle(currentImage);
+    }
+
+    function onResizeEnd(): void {
+      document.removeEventListener('mousemove', onResize);
+      document.removeEventListener('mouseup', onResizeEnd);
+      resizeData = null;
+      if(currentImage) posTools(currentImage);
+    }
+
+    window.addEventListener('scroll', function(){
+      if(currentImage && tools.style.display !== 'none') posTools(currentImage);
+    });
+    window.addEventListener('resize', function(){
+      if(currentImage && tools.style.display !== 'none') posTools(currentImage);
+    });
+  }
+};
+
+export default imageTools;

package/src/plugins/indent.ts

@@ -0,0 +1,29 @@
+import type { Plugin, PluginContext } from '../types';
+
+const indent: Plugin = {
+  name: 'indent',
+  order: 25,
+  toolbarHTML: '' +
+    '<button type="button" class="btn btn-sm btn-light" title="Indent" data-cmd="indent"><i class="ti ti-indent-increase"></i></button>' +
+    '<button type="button" class="btn btn-sm btn-light" title="Outdent" data-cmd="outdent"><i class="ti ti-indent-decrease"></i></button>',
+  init(ctx: PluginContext): void {
+    if (!ctx.features.indent) return;
+    // Buttons may be absent when a custom `toolbar` layout omits this group.
+    const indentBtn = ctx.wrapper.querySelector('[data-cmd="indent"]');
+    if (indentBtn) {
+      indentBtn.addEventListener('click', function () {
+        document.execCommand('indent', false, undefined);
+        ctx.editor.focus();
+      });
+    }
+    const outdentBtn = ctx.wrapper.querySelector('[data-cmd="outdent"]');
+    if (outdentBtn) {
+      outdentBtn.addEventListener('click', function () {
+        document.execCommand('outdent', false, undefined);
+        ctx.editor.focus();
+      });
+    }
+  }
+};
+
+export default indent;

package/src/plugins/index.ts

@@ -0,0 +1,101 @@
+import type { PluginManagerInstance } from '../types';
+
+import block from './block';
+import inline from './inline';
+import pre from './pre';
+import inlineCode from './inlineCode';
+import subSuper from './subSuper';
+import keyboardShortcuts from './keyboardShortcuts';
+
+import readOnly from './readOnly';
+import linkTooltip from './linkTooltip';
+import emojiAutocomplete from './emojiAutocomplete';
+import statusBar from './statusBar';
+import codeBlock from './codeBlock';
+import mediaEmbed from './mediaEmbed';
+import dragDrop from './dragDrop';
+import pastePlain from './pastePlain';
+import findReplace from './findReplace';
+import indent from './indent';
+import list from './list';
+import lineHeight from './lineHeight';
+import fontSize from './fontSize';
+import fontFamily from './fontFamily';
+import specialChars from './specialChars';
+import colors from './colors';
+import tableBg from './tableBg';
+import align from './align';
+import markdown from './markdown';
+import link from './link';
+import image from './image';
+import imageProps from './imageProps';
+import imageTools from './imageTools';
+import iframe from './iframe';
+import table from './table';
+import tableTools from './tableTools';
+import hr from './hr';
+import unlink from './unlink';
+import emoji from './emoji';
+import direction from './direction';
+import source from './source';
+import history from './history';
+import fullscreen from './fullscreen';
+import toolbarCollapse from './toolbarCollapse';
+import autosave from './autosave';
+import autoLinkify from './autoLinkify';
+import caseTransform from './caseTransform';
+import shortcutsHelp from './shortcutsHelp';
+import floatingToolbar from './floatingToolbar';
+import darkMode from './darkMode';
+import shortcutCustomizer from './shortcutCustomizer';
+
+export default function registerDefaultPlugins(pm: PluginManagerInstance): void {
+  pm.register('block', block);
+  pm.register('inline', inline);
+  pm.register('pre', pre);
+  pm.register('inlineCode', inlineCode);
+  pm.register('subSuper', subSuper);
+  pm.register('keyboardShortcuts', keyboardShortcuts);
+
+  pm.register('readOnly', readOnly);
+  pm.register('linkTooltip', linkTooltip);
+  pm.register('emojiAutocomplete', emojiAutocomplete);
+  pm.register('statusBar', statusBar);
+  pm.register('codeBlock', codeBlock);
+  pm.register('mediaEmbed', mediaEmbed);
+  pm.register('dragDrop', dragDrop);
+  pm.register('pastePlain', pastePlain);
+  pm.register('findReplace', findReplace);
+  pm.register('indent', indent);
+  pm.register('list', list);
+  pm.register('lineHeight', lineHeight);
+  pm.register('fontSize', fontSize);
+  pm.register('fontFamily', fontFamily);
+  pm.register('specialChars', specialChars);
+  pm.register('colors', colors);
+  pm.register('tableBg', tableBg);
+  pm.register('align', align);
+  pm.register('markdown', markdown);
+  pm.register('link', link);
+  pm.register('image', image);
+  pm.register('imageProps', imageProps);
+  pm.register('imageTools', imageTools);
+  pm.register('iframe', iframe);
+  pm.register('table', table);
+  pm.register('tableTools', tableTools);
+  pm.register('hr', hr);
+  pm.register('unlink', unlink);
+  pm.register('emoji', emoji);
+  pm.register('direction', direction);
+  pm.register('source', source);
+  pm.register('history', history);
+  pm.register('fullscreen', fullscreen);
+  pm.register('toolbarCollapse', toolbarCollapse);
+  pm.register('autosave', autosave);
+  pm.register('autoLinkify', autoLinkify);
+  pm.register('caseTransform', caseTransform);
+  pm.register('shortcutsHelp', shortcutsHelp);
+  pm.register('floatingToolbar', floatingToolbar);
+  pm.register('darkMode', darkMode);
+  pm.register('shortcutCustomizer', shortcutCustomizer);
+}

package/src/plugins/inline.ts

@@ -0,0 +1,17 @@
+import type { Plugin, PluginContext } from '../types';
+
+const inline: Plugin = {
+  name: 'inline',
+  order: 20,
+  toolbarHTML: '' +
+    '<button type="button" class="btn btn-sm btn-light" title="Bold" data-cmd="bold"><i class="ti ti-bold"></i></button>' +
+    '<button type="button" class="btn btn-sm btn-light" title="Italic" data-cmd="italic"><i class="ti ti-italic"></i></button>' +
+    '<button type="button" class="btn btn-sm btn-light" title="Underline" data-cmd="underline"><i class="ti ti-underline"></i></button>' +
+    '<button type="button" class="btn btn-sm btn-light" title="Strikethrough" data-cmd="strikeThrough"><s>S</s></button>' +
+    '<div class="te-divider"></div>' +
+    '<button type="button" class="btn btn-sm btn-light" title="Quote" data-cmd="formatBlock" data-val="blockquote"><strong>"</strong></button>',
+  init(ctx: PluginContext): void {
+  }
+};
+
+export default inline;

package/src/plugins/inlineCode.ts

@@ -0,0 +1,21 @@
+import type { Plugin, PluginContext } from '../types';
+import * as H from '../core/helpers';
+
+const inlineCode: Plugin = {
+  name: 'inlineCode',
+  order: 22,
+  toolbarHTML: '<button type="button" class="btn btn-sm btn-light" title="Inline code" data-cmd="inlineCode"><i class="ti ti-code-circle"></i></button>',
+  init(ctx: PluginContext): void {
+    if (!ctx.features.inlineCode) return;
+    var btn = ctx.wrapper.querySelector('[data-cmd="inlineCode"]') as HTMLElement | null;
+    if (!btn) return;
+    btn.addEventListener('click', function () {
+      var txt = H.escapeHtml(window.getSelection()!.toString() || 'code');
+      var html = '<code>' + txt + '</code>';
+      document.execCommand('insertHTML', false, html);
+      ctx.editor.focus();
+    });
+  }
+};
+
+export default inlineCode;

package/src/plugins/keyboardShortcuts.ts

@@ -0,0 +1,92 @@
+import type { Plugin, PluginContext, TeEditorElement } from '../types';
+
+var STORAGE_KEY = 'te-shortcut-map';
+var DEFAULT_MAP = {
+  '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(){
+  try {
+    var raw = localStorage.getItem(STORAGE_KEY);
+    if(raw) return JSON.parse(raw);
+  } catch(_){}
+  return JSON.parse(JSON.stringify(DEFAULT_MAP));
+}
+
+const keyboardShortcuts: Plugin = {
+  name: 'keyboardShortcuts',
+  order: 5,
+  init(ctx: PluginContext): void {
+    if(ctx.features.keyboardShortcuts === false) return;
+    var editor = ctx.editor as TeEditorElement;
+    var map = loadMap();
+
+    editor.addEventListener('keydown', function(e: KeyboardEvent){
+      if(!e.ctrlKey && !e.metaKey) return;
+      for(var name in map){
+        var s = map[name];
+        if(e.key.toLowerCase() === s.key && e.ctrlKey === s.ctrl && e.shiftKey === s.shift){
+          e.preventDefault();
+          if(name === 'Bold'){ document.execCommand('bold'); }
+          else if(name === 'Italic'){ document.execCommand('italic'); }
+          else if(name === 'Underline'){ document.execCommand('underline'); }
+          else if(name === 'Strike'){ document.execCommand('strikeThrough'); }
+          else if(name === 'Undo'){
+            var h = editor._tableHist;
+            if(h && h.undo.length){
+              editor.querySelectorAll('.te-fr-match, .te-fr-active').forEach(function(el){
+                var p = el.parentNode; if(!p) return;
+                while(el.firstChild) p.insertBefore(el.firstChild, el);
+                p.removeChild(el);
+              });
+              h.redo.push(editor.innerHTML);
+              editor.contentEditable = 'false';
+              editor.innerHTML = h.undo.pop()!;
+              editor.contentEditable = 'true';
+              editor.querySelectorAll('.te-fr-match, .te-fr-active').forEach(function(el){
+                var p = el.parentNode; if(!p) return;
+                while(el.firstChild) p.insertBefore(el.firstChild, el);
+                p.removeChild(el);
+              });
+              editor.focus();
+            } else { document.execCommand('undo'); editor.focus(); }
+          }
+          else if(name === 'Redo' || name === 'RedoAlt'){
+            var h = editor._tableHist;
+            if(h && h.redo.length){
+              editor.querySelectorAll('.te-fr-match, .te-fr-active').forEach(function(el){
+                var p = el.parentNode; if(!p) return;
+                while(el.firstChild) p.insertBefore(el.firstChild, el);
+                p.removeChild(el);
+              });
+              h.undo.push(editor.innerHTML);
+              editor.contentEditable = 'false';
+              editor.innerHTML = h.redo.pop()!;
+              editor.contentEditable = 'true';
+              editor.querySelectorAll('.te-fr-match, .te-fr-active').forEach(function(el){
+                var p = el.parentNode; if(!p) return;
+                while(el.firstChild) p.insertBefore(el.firstChild, el);
+                p.removeChild(el);
+              });
+              editor.focus();
+            } else { document.execCommand('redo'); editor.focus(); }
+          }
+          else if(name === 'Link'){
+            var linkBtn = ctx.wrapper.querySelector('[data-cmd="createLink"]') as HTMLButtonElement | null;
+            if(linkBtn) linkBtn.click();
+          }
+          return;
+        }
+      }
+    });
+  }
+};
+
+export default keyboardShortcuts;

package/src/plugins/lineHeight.ts

@@ -0,0 +1,40 @@
+import type { Plugin, PluginContext } from '../types';
+
+const lineHeight: Plugin = {
+  name: 'lineHeight',
+  order: 26,
+  css: '' +
+    '.te-lh-select { width: auto; }',
+  toolbarHTML: '' +
+    '<select class="te-lh form-select form-select-sm te-lh-select" title="Line height">' +
+    '  <option value="" disabled selected>Line Height</option>' +
+    '  <option value="1">1</option>' +
+    '  <option value="1.15">1.15</option>' +
+    '  <option value="1.5">1.5</option>' +
+    '  <option value="1.8">1.8</option>' +
+    '  <option value="2">2</option>' +
+    '  <option value="2.5">2.5</option>' +
+    '  <option value="3">3</option>' +
+    '</select>',
+  init(ctx: PluginContext): void {
+    if(!ctx.features.lineHeight) return;
+    var sel = ctx.wrapper.querySelector('.te-lh') as HTMLSelectElement | null;
+    if(!sel) return;
+    sel.addEventListener('change', function(){
+      var v = sel!.value;
+      if(!v) return;
+      document.execCommand('formatBlock', false, 'p');
+      var s = window.getSelection();
+      if(!s || !s.rangeCount) return;
+      var node: Node | null = s.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,li,blockquote');
+      if(block && ctx.wrapper.contains(block)){
+        (block as HTMLElement).style.lineHeight = v;
+      }
+      ctx.editor.focus();
+    });
+  }
+};
+
+export default lineHeight;