tulih-editor 0.1.0

package/src/plugins/findReplace.ts

@@ -0,0 +1,229 @@
+import type { Plugin, PluginContext, TeEditorElement } from '../types';
+
+const findReplace: Plugin = {
+  name: 'findReplace',
+  order: 31,
+  css: '' +
+    '.te-fr-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: .75rem; width: 320px;' +
+    '}' +
+    '.te-fr-popup .te-fr-row { display: flex; gap: .5rem; margin-bottom: .5rem; }' +
+    '.te-fr-popup .te-fr-row:last-child { margin-bottom: 0; }' +
+    '.te-fr-popup input { flex: 1; }' +
+    '.te-fr-popup .btn { white-space: nowrap; }' +
+    '.te-fr-count { font-size: .8rem; color: #6c757d; padding: .25rem .5rem; }' +
+    '.te-fr-match { background: #fff3cd; outline: 2px solid #ffc107; }' +
+    '.te-fr-active { background: #f0ad4e; outline: 2px solid #e68600; }',
+  toolbarHTML: '<button type="button" class="btn btn-sm btn-light" title="Find & Replace" data-cmd="findReplace"><i class="ti ti-search"></i></button>',
+  init(ctx: PluginContext): void {
+    if(!ctx.features.findReplace) return;
+    var editor = ctx.editor as TeEditorElement;
+    var popup = document.createElement('div');
+    popup.className = 'te-fr-popup';
+    popup.style.display = 'none';
+    popup.innerHTML = '' +
+      '<div class="te-fr-row">' +
+        '<input type="text" class="form-control form-control-sm te-fr-find" placeholder="Find..." />' +
+        '<button type="button" class="btn btn-sm btn-outline-primary te-fr-prev" title="Previous">&uarr;</button>' +
+        '<button type="button" class="btn btn-sm btn-primary te-fr-next" title="Next">&darr;</button>' +
+      '</div>' +
+      '<div class="te-fr-row">' +
+        '<input type="text" class="form-control form-control-sm te-fr-replace" placeholder="Replace..." />' +
+        '<button type="button" class="btn btn-sm btn-outline-secondary te-fr-replace-btn">Replace</button>' +
+        '<button type="button" class="btn btn-sm btn-outline-secondary te-fr-replace-all">All</button>' +
+      '</div>' +
+      '<div class="te-fr-row">' +
+        '<span class="te-fr-count"></span>' +
+        '<button type="button" class="btn btn-sm btn-outline-secondary te-fr-close ms-auto" title="Close">&times;</button>' +
+      '</div>';
+    document.body.appendChild(popup);
+
+    var findInp = popup.querySelector('.te-fr-find') as HTMLInputElement;
+    var replaceInp = popup.querySelector('.te-fr-replace') as HTMLInputElement;
+    var countEl = popup.querySelector('.te-fr-count') as HTMLElement;
+
+    function escapeRe(s: string){
+      return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+
+    function clearHighlights(){
+      editor.querySelectorAll('.te-fr-match, .te-fr-active').forEach(function(el){
+        var parent = el.parentNode;
+        if(!parent) return;
+        while(el.firstChild) parent.insertBefore(el.firstChild, el);
+        parent.removeChild(el);
+      });
+      editor.normalize();
+    }
+
+    function selectMatch(el: Element | null){
+      editor.querySelectorAll('.te-fr-active').forEach(function(a){ a.classList.remove('te-fr-active'); a.classList.add('te-fr-match'); });
+      if(!el) return;
+      el.classList.remove('te-fr-match');
+      el.classList.add('te-fr-active');
+      (el as HTMLElement).scrollIntoView({ block: 'nearest' });
+      var range = document.createRange();
+      range.selectNodeContents(el);
+      var sel = window.getSelection()!;
+      sel.removeAllRanges();
+      sel.addRange(range);
+    }
+
+    var highlights: Element[] = [];
+    var currentIdx = -1;
+
+    function doFind(){
+      clearHighlights();
+      var text = findInp.value.trim();
+      if(!text) return;
+      var nodes: Node[] = [];
+      var walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT, null);
+      while(walker.nextNode()) nodes.push(walker.currentNode);
+      highlights = [];
+      nodes.forEach(function(node){
+        var nodeText = node.textContent!;
+        var re2 = new RegExp(escapeRe(text), 'gi');
+        var matches: { idx: number; len: number }[] = [];
+        var match: RegExpExecArray | null;
+        while((match = re2.exec(nodeText)) !== null){
+          matches.push({ idx: match.index, len: match[0].length });
+        }
+        // Process matches in reverse order to avoid index drift
+        for(var i = matches.length - 1; i >= 0; i--){
+          var m = matches[i];
+          var span = document.createElement('span');
+          span.className = 'te-fr-match';
+          span.textContent = nodeText.substring(m.idx, m.idx + m.len);
+          var after = (node as Text).splitText(m.idx + m.len);
+          var mid = (node as Text).splitText(m.idx);
+          mid.parentNode!.replaceChild(span, mid);
+          highlights.push(span);
+        }
+      });
+      countEl.textContent = highlights.length + ' matches';
+    }
+
+    function goNext(){
+      if(!highlights.length){ doFind(); if(!highlights.length) return; currentIdx = 0; }
+      else currentIdx = (currentIdx + 1) % highlights.length;
+      selectMatch(highlights[currentIdx]);
+    }
+    function goPrev(){
+      if(!highlights.length){ doFind(); if(!highlights.length) return; currentIdx = highlights.length - 1; }
+      else currentIdx = (currentIdx - 1 + highlights.length) % highlights.length;
+      selectMatch(highlights[currentIdx]);
+    }
+    function doFindAndSelect(dir: number){
+      doFind();
+      if(!highlights.length) return;
+      currentIdx = dir === 1 ? 0 : highlights.length - 1;
+      selectMatch(highlights[currentIdx]);
+    }
+
+    popup.querySelector('.te-fr-next')!.addEventListener('click', goNext);
+    popup.querySelector('.te-fr-prev')!.addEventListener('click', goPrev);
+    function closePopup(){
+      popup.style.display = 'none';
+      clearHighlights();
+      editor.focus();
+    }
+
+    findInp.addEventListener('input', function(){ doFind(); });
+    findInp.addEventListener('keydown', function(e: KeyboardEvent){
+      if(e.key === 'Enter') { e.preventDefault(); doFindAndSelect(1); }
+      if(e.key === 'Escape') { e.preventDefault(); closePopup(); }
+    });
+    replaceInp.addEventListener('keydown', function(e: KeyboardEvent){
+      if(e.key === 'Enter') { e.preventDefault(); (popup.querySelector('.te-fr-replace-btn') as HTMLButtonElement).click(); }
+      if(e.key === 'Escape') { e.preventDefault(); closePopup(); }
+    });
+    function saveUndoState(){
+      clearHighlights();
+      if(!editor._tableHist) editor._tableHist = {undo:[], redo:[]};
+      editor._tableHist.undo.push(editor.innerHTML);
+      if(editor._tableHist.undo.length > 50) editor._tableHist.undo.shift();
+      editor._tableHist.redo = [];
+    }
+
+    function updateUndoRedoBtns(){
+      var btn = ctx.wrapper.querySelector('[data-cmd="undo"]') as HTMLButtonElement | null;
+      var rbtn = ctx.wrapper.querySelector('[data-cmd="redo"]') as HTMLButtonElement | null;
+      var h = editor._tableHist;
+      if(btn) btn.toggleAttribute('disabled', !h || !h.undo.length);
+      if(rbtn) rbtn.toggleAttribute('disabled', !h || !h.redo.length);
+    }
+
+    popup.querySelector('.te-fr-replace-btn')!.addEventListener('click', function(){
+      if(!highlights.length) return;
+      var active = editor.querySelector('.te-fr-active');
+      if(!active) return;
+      saveUndoState();
+      var text = replaceInp.value;
+      var parent = active.parentNode;
+      if(parent) parent.replaceChild(document.createTextNode(text), active);
+      // Update highlights
+      highlights.splice(currentIdx, 1);
+      countEl.textContent = highlights.length + ' matches';
+      if(highlights.length){
+        currentIdx = Math.min(currentIdx, highlights.length - 1);
+        selectMatch(highlights[currentIdx]);
+      } else {
+        countEl.textContent = '0 matches';
+      }
+      updateUndoRedoBtns();
+    });
+    popup.querySelector('.te-fr-replace-all')!.addEventListener('click', function(){
+      var findText = findInp.value.trim();
+      var replaceText = replaceInp.value;
+      if(!findText) return;
+      saveUndoState();
+      clearHighlights();
+      var re = new RegExp(escapeRe(findText), 'gi');
+      var walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT, null);
+      var nodes: Node[] = [];
+      while(walker.nextNode()) nodes.push(walker.currentNode);
+      var count = 0;
+      nodes.forEach(function(node){
+        var text = node.textContent!;
+        if(!re.test(text)) return;
+        re.lastIndex = 0;
+        node.textContent = text.replace(re, function(){ count++; return replaceText; });
+      });
+      countEl.textContent = count + ' replaced';
+      highlights = [];
+      currentIdx = -1;
+      updateUndoRedoBtns();
+    });
+    popup.querySelector('.te-fr-close')!.addEventListener('click', closePopup);
+
+    var btn = ctx.wrapper.querySelector('[data-cmd="findReplace"]') as HTMLButtonElement | null;
+    if(!btn) return;
+    btn.addEventListener('click', function(e: MouseEvent){
+      var rect = (btn as HTMLButtonElement).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' ? 'block' : 'none';
+      if(popup.style.display !== 'none'){
+        findInp.value = '';
+        replaceInp.value = '';
+        countEl.textContent = '';
+        clearHighlights();
+        highlights = [];
+        currentIdx = -1;
+        findInp.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';
+        clearHighlights();
+      }
+    });
+  }
+};
+
+export default findReplace;

package/src/plugins/floatingToolbar.ts

@@ -0,0 +1,258 @@
+import type { Plugin, PluginContext } from '../types';
+
+const floatingToolbar: Plugin = {
+  name: 'floatingToolbar',
+  order: 58,
+  css: '' +
+    '.te-float-toolbar {' +
+    '  position: fixed; display: none; z-index: 3100;' +
+    '  background: #fff; border: 1px solid #dee2e6;' +
+    '  border-radius: .375rem; box-shadow: 0 6px 20px rgba(0,0,0,.15);' +
+    '  padding: .2rem; gap: 2px; align-items: center;' +
+    '  white-space: nowrap;' +
+    '}' +
+    '.te-float-toolbar .btn {' +
+    '  padding: .2rem .4rem !important; font-size: .75rem !important; line-height: 1 !important;' +
+    '}' +
+    '.te-float-toolbar .btn i,' +
+    '.te-float-toolbar .btn svg {' +
+    '  width: 13px !important; height: 13px !important;' +
+    '  pointer-events: none;' +
+    '}' +
+    '.te-float-link-input {' +
+    '  position: fixed; display: none; z-index: 3101;' +
+    '  background: #fff; border: 1px solid #dee2e6;' +
+    '  border-radius: .375rem; box-shadow: 0 6px 20px rgba(0,0,0,.15);' +
+    '  padding: .35rem; gap: .25rem; align-items: center;' +
+    '  white-space: nowrap;' +
+    '}' +
+    '.te-float-link-input input {' +
+    '  width: 220px; padding: .2rem .4rem; font-size: .8rem;' +
+    '  border: 1px solid #dee2e6; border-radius: .25rem; outline: none;' +
+    '}' +
+    '.te-float-link-input input:focus {' +
+    '  border-color: #86b7fe; box-shadow: 0 0 0 2px rgba(13,110,253,.15);' +
+    '}' +
+    '.te-float-link-input .btn {' +
+    '  padding: .2rem .5rem !important; font-size: .75rem !important; line-height: 1 !important;' +
+    '}',
+  init(ctx: PluginContext): void {
+    if(!ctx.features.floatingToolbar) return;
+
+    var editor = ctx.editor;
+    var tools = document.createElement('div');
+    tools.className = 'te-float-toolbar';
+    tools.innerHTML = '' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-float="bold" title="Bold"><i class="ti ti-bold"></i></button>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-float="italic" title="Italic"><i class="ti ti-italic"></i></button>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-float="underline" title="Underline"><i class="ti ti-underline"></i></button>' +
+      '<span class="te-divider-v" style="display:inline-block;width:1px;height:14px;background:#dee2e6;margin:0 2px;vertical-align:middle"></span>' +
+      '<button type="button" class="btn btn-sm btn-light te-float-fore" title="Text color" style="position:relative;padding:.15rem .35rem!important;min-width:22px;text-align:center"><span class="te-float-cp" style="display:block;font-size:.8rem;line-height:1">A<span style="display:block;height:2px;border-radius:1px;margin-top:1px;background:#000"></span></span><input type="color" class="te-float-fore-input" value="#000000" style="position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0"></button>' +
+      '<button type="button" class="btn btn-sm btn-light te-float-back" title="Background color" style="position:relative;padding:.15rem .35rem!important;min-width:22px;text-align:center"><span class="te-float-cp" style="display:block;font-size:.8rem;line-height:1">A<span style="display:block;height:2px;border-radius:1px;margin-top:1px;background:#ffff00"></span></span><input type="color" class="te-float-back-input" value="#ffff00" style="position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0"></button>' +
+      '<span class="te-divider-v" style="display:inline-block;width:1px;height:14px;background:#dee2e6;margin:0 2px;vertical-align:middle"></span>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-float="link" title="Insert link"><i class="ti ti-link"></i></button>' +
+      '<span class="te-divider-v" style="display:inline-block;width:1px;height:14px;background:#dee2e6;margin:0 2px;vertical-align:middle"></span>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-float="removeFormat" title="Clear formatting"><i class="ti ti-clear-formatting"></i></button>';
+    document.body.appendChild(tools);
+
+    var linkInput = document.createElement('div');
+    linkInput.className = 'te-float-link-input';
+    linkInput.innerHTML = '' +
+      '<input type="url" class="te-float-link-url" placeholder="https://example.com" />' +
+      '<button type="button" class="btn btn-sm btn-primary" data-te-float-link="apply">Apply</button>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-float-link="cancel">Cancel</button>';
+    document.body.appendChild(linkInput);
+
+    var foreInput = tools.querySelector('.te-float-fore-input') as HTMLInputElement | null;
+    var backInput = tools.querySelector('.te-float-back-input') as HTMLInputElement | null;
+
+    if(foreInput){
+      foreInput.addEventListener('change', function(){
+        editor.focus();
+        restoreRange();
+        document.execCommand('foreColor', false, (foreInput as HTMLInputElement).value);
+        var preview = tools.querySelector('.te-float-fore .te-float-cp') as HTMLElement | null;
+        if(preview) preview.style.color = (foreInput as HTMLInputElement).value;
+        hideTools();
+      });
+    }
+
+    if(backInput){
+      backInput.addEventListener('change', function(){
+        editor.focus();
+        restoreRange();
+        try{ document.execCommand('hiliteColor', false, (backInput as HTMLInputElement).value); }
+        catch(e){ document.execCommand('backColor', false, (backInput as HTMLInputElement).value); }
+        var bar = tools.querySelector('.te-float-back .te-float-cp span:last-child') as HTMLElement | null;
+        if(bar) bar.style.background = (backInput as HTMLInputElement).value;
+        hideTools();
+      });
+    }
+
+    var hideTimer: ReturnType<typeof setTimeout> | null = null;
+    var isVisible = false;
+    var savedRange: Range | null = null;
+
+    function saveRange(){
+      var sel = window.getSelection();
+      if(sel && sel.rangeCount > 0) savedRange = sel.getRangeAt(0).cloneRange();
+      else savedRange = null;
+    }
+
+    function restoreRange(){
+      if(!savedRange) return;
+      var sel = window.getSelection()!;
+      sel.removeAllRanges();
+      sel.addRange(savedRange);
+    }
+
+    function posTools(x: number, y: number, rect: DOMRect | null){
+      var tw = tools.offsetWidth || 100;
+      var th = tools.offsetHeight || 30;
+      var er = editor.getBoundingClientRect();
+      var left = x - tw / 2;
+      if(left < er.left) left = er.left;
+      if(left + tw > er.right) left = er.right - tw;
+      var spaceAbove = rect ? rect.top - er.top : y - er.top;
+      var spaceBelow = rect ? er.bottom - rect.bottom : er.bottom - y;
+      var top;
+      if(spaceAbove >= th + 8){
+        top = (rect ? rect.top : y) - th - 8;
+      } else if(spaceBelow >= th + 8){
+        top = (rect ? rect.bottom : y) + 8;
+      } else {
+        top = spaceAbove > spaceBelow ? er.top + 2 : er.bottom - th - 2;
+      }
+      tools.style.left = left + 'px';
+      tools.style.top = top + 'px';
+    }
+
+    function hideTools(){
+      isVisible = false;
+      linkInput.style.display = 'none';
+      tools.style.display = 'none';
+    }
+
+    function showTools(x: number, y: number, rect: DOMRect | null){
+      isVisible = true;
+      tools.style.display = 'flex';
+      posTools(x, y, rect);
+      saveRange();
+    }
+
+    function showLinkInput(){
+      saveRange();
+      var er = editor.getBoundingClientRect();
+      var toolsRect = tools.getBoundingClientRect();
+      linkInput.style.display = 'flex';
+      linkInput.style.visibility = 'hidden';
+      var liw = linkInput.offsetWidth || 320;
+      var lih = linkInput.offsetHeight || 32;
+      var left = toolsRect.left + toolsRect.width / 2 - liw / 2;
+      if(left < er.left) left = er.left;
+      if(left + liw > er.right) left = er.right - liw;
+      linkInput.style.left = left + 'px';
+      var spaceBelow = window.innerHeight - toolsRect.bottom;
+      linkInput.style.top = ((spaceBelow >= lih + 4) ? (toolsRect.bottom + 4) : (toolsRect.top - lih - 4)) + 'px';
+      linkInput.style.visibility = '';
+      (linkInput.querySelector('.te-float-link-url') as HTMLInputElement).value = '';
+      (linkInput.querySelector('.te-float-link-url') as HTMLInputElement).focus();
+    }
+
+    editor.addEventListener('mouseup', function(e: MouseEvent){
+      if(editor.contentEditable !== 'true') return;
+      if(hideTimer) clearTimeout(hideTimer);
+      var sel = window.getSelection();
+      if(!sel || sel.isCollapsed || !sel.toString().trim()){
+        hideTools();
+        return;
+      }
+      if(!editor.contains(sel.anchorNode) || !editor.contains(sel.focusNode)){
+        hideTools();
+        return;
+      }
+      var range = sel.getRangeAt(0);
+      var rect = range.getBoundingClientRect();
+      var x = rect.left + rect.width / 2;
+      showTools(x, 0, rect);
+    });
+
+    editor.addEventListener('mousedown', function(){
+      if(hideTimer) clearTimeout(hideTimer);
+      hideTimer = setTimeout(function(){ hideTools(); }, 200);
+    });
+
+    editor.addEventListener('keydown', function(){
+      hideTools();
+    });
+
+    editor.addEventListener('scroll', function(){
+      if(isVisible) hideTools();
+    });
+
+    tools.addEventListener('mousedown', function(e: MouseEvent){
+      e.preventDefault();
+      var actionBtn = (e.target as HTMLElement).closest('[data-te-float]');
+      if(!actionBtn) return;
+      var action = actionBtn.getAttribute('data-te-float');
+      if(!action) return;
+
+      if(action === 'link'){
+        showLinkInput();
+        return;
+      }
+
+      editor.focus();
+      var sel = window.getSelection();
+      if(!sel || sel.rangeCount === 0) return;
+      document.execCommand(action, false, undefined);
+      hideTools();
+    });
+
+    linkInput.addEventListener('mousedown', function(e: MouseEvent){
+      e.preventDefault();
+      var actionBtn = (e.target as HTMLElement).closest('[data-te-float-link]');
+      if(!actionBtn) return;
+      var action = actionBtn.getAttribute('data-te-float-link');
+
+      if(action === 'cancel'){
+        hideTools();
+        return;
+      }
+
+      if(action === 'apply'){
+        var url = (linkInput.querySelector('.te-float-link-url') as HTMLInputElement).value.trim();
+        if(!url) return;
+        editor.focus();
+        restoreRange();
+        if (!/^https?:\/\//i.test(url) && !/^mailto:/i.test(url) && !/^tel:/i.test(url)) url = 'https://' + url;
+        document.execCommand('createLink', false, url);
+        hideTools();
+      }
+    });
+
+    linkInput.addEventListener('keydown', function(e: KeyboardEvent){
+      if(e.key === 'Enter'){
+        e.preventDefault();
+        var url = (linkInput.querySelector('.te-float-link-url') as HTMLInputElement).value.trim();
+        if(!url) return;
+        editor.focus();
+        restoreRange();
+        if (!/^https?:\/\//i.test(url) && !/^mailto:/i.test(url) && !/^tel:/i.test(url)) url = 'https://' + url;
+        document.execCommand('createLink', false, url);
+        hideTools();
+      }
+      if(e.key === 'Escape'){
+        hideTools();
+      }
+    });
+
+    document.addEventListener('mousedown', function(e: MouseEvent){
+      if(isVisible && !tools.contains(e.target as Node) && !linkInput.contains(e.target as Node) && e.target !== editor && !editor.contains(e.target as Node)){
+        hideTools();
+      }
+    });
+  }
+};
+
+export default floatingToolbar;

package/src/plugins/fontFamily.ts

@@ -0,0 +1,41 @@
+import type { Plugin, PluginContext } from '../types';
+
+var FONTS = [
+  'Arial',
+  'Arial Black',
+  'Comic Sans MS',
+  'Courier New',
+  'Georgia',
+  'Impact',
+  'Lucida Console',
+  'Tahoma',
+  'Times New Roman',
+  'Trebuchet MS',
+  'Verdana'
+];
+
+const fontFamily: Plugin = {
+  name: 'fontFamily',
+  order: 28,
+  css: '' +
+    '.te-fontfamily-select { width: auto; }',
+  toolbarHTML: '' +
+    '<span class="te-dropdown-icon"><i class="ti ti-typography"></i></span>' +
+    '<select class="te-fontfamily form-select form-select-sm te-fontfamily-select" title="Font family">' +
+    '  <option value="">Normal</option>' +
+        FONTS.map(function(f){ return '<option value="' + f + '">' + f + '</option>'; }).join('') +
+    '</select>',
+  init(ctx: PluginContext): void {
+    if(!ctx.features.fontFamily) return;
+    var sel = ctx.wrapper.querySelector('.te-fontfamily') as HTMLSelectElement | null;
+    if(!sel) return;
+    sel.addEventListener('change', function(){
+      var v = sel!.value;
+      if(!v) return;
+      document.execCommand('fontName', false, v);
+      ctx.editor.focus();
+    });
+  }
+};
+
+export default fontFamily;

package/src/plugins/fontSize.ts

@@ -0,0 +1,32 @@
+import type { Plugin, PluginContext } from '../types';
+import * as H from '../core/helpers';
+
+var FONT_SIZES = ['8', '9', '10', '11', '12', '13', '14', '16', '18', '20', '22', '24', '26', '28', '36', '48', '72'];
+
+const fontSize: Plugin = {
+  name: 'fontSize',
+  order: 27,
+  css: '' +
+    '.te-fontsize-select { width: auto; }',
+  toolbarHTML: '' +
+    '<span class="te-dropdown-icon te-dropdown-icon-text">Aa</span>' +
+    '<select class="te-fontsize form-select form-select-sm te-fontsize-select" title="Font size">' +
+    '  <option value="">Normal</option>' +
+        FONT_SIZES.map(function (s) { return '<option value="' + s + '">' + s + '</option>'; }).join('') +
+    '</select>',
+  init(ctx: PluginContext): void {
+    if (!ctx.features.fontSize) return;
+    var sel = ctx.wrapper.querySelector('.te-fontsize') as HTMLSelectElement | null;
+    if (!sel) return;
+    sel.addEventListener('change', function () {
+      var v = sel!.value;
+      if (!v) return;
+      var txt = H.escapeHtml(window.getSelection()!.toString() || 'text');
+      var html = '<span style="font-size:' + v + 'px">' + txt + '</span>';
+      document.execCommand('insertHTML', false, html);
+      ctx.editor.focus();
+    });
+  }
+};
+
+export default fontSize;

package/src/plugins/fullscreen.ts

@@ -0,0 +1,36 @@
+import type { Plugin, PluginContext } from '../types';
+
+const fullscreen: Plugin = {
+  name: 'fullscreen',
+  order: 75,
+  css: '' +
+    '.te-fullscreen {' +
+    '  position: fixed; inset: 0; z-index: 9999;' +
+    '}' +
+    '.te-fullscreen .te-container {' +
+    '  max-width: none; display: flex; flex-direction: column; height: 100%;' +
+    '}' +
+    '.te-fullscreen .te-container .te-editor {' +
+    '  flex: 1; height: auto !important; min-height: 300px;' +
+    '}' +
+    '.te-fullscreen .te-container .te-toolbar {' +
+    '  border-radius: 0;' +
+    '}' +
+    '.te-fullscreen .te-btn-fullscreen {' +
+    '  background: #e7f1ff; border-color: #b6d4fe;' +
+    '}',
+  toolbarHTML: '<button type="button" class="btn btn-sm btn-light te-btn-fullscreen" title="Fullscreen" data-cmd="fullscreen"><i class="ti ti-maximize"></i></button>',
+  init(ctx: PluginContext): void {
+    if (!ctx.features.fullscreen) return;
+    var btn = ctx.wrapper.querySelector('[data-cmd="fullscreen"]') as HTMLElement | null;
+    if (!btn) return;
+    btn.addEventListener('click', function () {
+      var isFull = ctx.wrapper.classList.toggle('te-fullscreen');
+      btn!.innerHTML = isFull ? '<i class="ti ti-minimize"></i>' : '<i class="ti ti-maximize"></i>';
+
+      ctx.editor.focus();
+    });
+  }
+};
+
+export default fullscreen;

package/src/plugins/history.ts

@@ -0,0 +1,14 @@
+import type { Plugin, PluginContext } from '../types';
+
+const history: Plugin = {
+  name: 'history',
+  order: 70,
+  toolbarHTML: '' +
+    '<button type="button" class="btn btn-sm btn-light" title="Undo" data-cmd="undo"><i class="ti ti-arrow-back-up"></i></button>' +
+    '<button type="button" class="btn btn-sm btn-light" title="Redo" data-cmd="redo"><i class="ti ti-arrow-forward-up"></i></button>' +
+    '<button type="button" class="btn btn-sm btn-light" title="Clear formatting" data-cmd="removeFormat"><i class="ti ti-trash"></i></button>',
+  init(ctx: PluginContext): void {
+  },
+};
+
+export default history;