tulih-editor 0.1.0

package/src/core/Editor.ts

@@ -0,0 +1,460 @@
+import * as H from './helpers';
+import type {
+  EditorOptions,
+  ResolvedOptions,
+  Features,
+  EditorUtils,
+  PluginContext,
+  SanitizeOptions,
+  TulihEditorStatic,
+  EditorInstance,
+  TeEditorElement,
+  TeWrapperElement,
+} from '../types';
+
+function buildEditorHTML(toolbarHTML: string, modalHTML: string): string {
+  return '' +
+    '<div class="te-container">' +
+    '  <div class="te-toolbar mb-0">' +
+    toolbarHTML +
+    '  </div>' +
+    '  <div class="te-editor" contenteditable="true" placeholder="Start typing..."></div>' +
+    modalHTML +
+    '</div>';
+}
+
+const DEFAULT_FEATURES: Features = {
+  block: false, inline: false, inlineCode: false, subSuper: false, removeFormat: false,
+  codeBlock: false, mediaEmbed: false, dragDrop: false,
+  readOnly: false, linkTooltip: false, emojiAutocomplete: false, statusBar: false,
+  pastePlain: false, findReplace: false, indent: false, list: false, autoLinkify: false, caseTransform: false, shortcutsHelp: false,
+  lineHeight: false, fontSize: false, fontFamily: false, specialChars: false,
+  colors: false, tableBg: false, align: false, markdown: false,
+  link: false, image: false, imageProps: false, imageTools: false,
+  iframe: false, table: false, tableTools: false, hr: false,
+  unlink: false, emoji: false, direction: false,
+  source: false, history: false, fullscreen: false,
+  toolbarCollapse: false, autosave: false, floatingToolbar: false,
+  darkMode: false, shortcutCustomizer: false, minimal: false,
+};
+
+const DEFAULT_SANITIZE: SanitizeOptions = {
+  allowedTags: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre', 'code', 'strong', 'em', 'u', 's', 'span', 'a', 'img', 'iframe', 'ul', 'ol', 'li', 'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td', 'br', 'hr'],
+  allowedAttributes: ['href', 'src', 'alt', 'title', 'width', 'height', 'class', 'id', 'style', 'target', 'rel', 'allow', 'allowfullscreen', 'frameborder'],
+};
+const DEFAULT_URL_SCHEMES = ['http', 'https', 'mailto', 'tel'];
+const DEFAULT_IMAGE_SCHEMES = ['http', 'https', 'data'];
+const DEFAULT_IFRAME_ALLOWLIST = ['youtube.com', 'www.youtube.com', 'youtu.be', 'player.vimeo.com', 'vimeo.com'];
+const DEFAULT_IFRAME_SANDBOX = 'allow-scripts allow-same-origin allow-presentation';
+const DEFAULT_IFRAME_ALLOW = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
+
+export default class Editor implements EditorInstance {
+  features!: Features;
+  options!: ResolvedOptions;
+  utils!: EditorUtils;
+  container: HTMLElement | null = null;
+  editor: HTMLElement | null = null;
+  toolbar: HTMLElement | null = null;
+  textarea!: HTMLTextAreaElement;
+  private _ctx: PluginContext | null = null;
+
+  constructor(target: string | Element, options: EditorOptions | undefined, TulihEditor: TulihEditorStatic) {
+    const el = (typeof target === 'string' ? document.querySelector(target) : target) as HTMLElement | null;
+    if (!el) return;
+    const isTextarea = String(el.tagName).toUpperCase() === 'TEXTAREA';
+    const hasAttr = el.matches && el.matches('textarea[data-tulih-editor]');
+    if (!isTextarea && !hasAttr) return;
+    const sibling = el.nextElementSibling;
+    if (sibling && sibling.querySelector && sibling.querySelector('.te-editor')) return;
+
+    const opts: EditorOptions = options || {};
+    const textarea = el as HTMLTextAreaElement;
+
+    const isMinimal = opts.minimal || (opts.features && opts.features.minimal);
+    if (isMinimal) {
+      this.features = Object.assign({}, DEFAULT_FEATURES, { floatingToolbar: true, link: true, linkTooltip: true }, opts.features || {});
+    } else {
+      const allOn: Features = {};
+      Object.keys(DEFAULT_FEATURES).forEach((k) => {
+        if (k !== 'minimal') allOn[k] = true;
+      });
+      this.features = Object.assign({}, allOn, opts.features || {});
+    }
+    this.options = {
+      sanitize: Object.assign({}, DEFAULT_SANITIZE, opts.sanitize || {}),
+      urlSchemes: Array.isArray(opts.allowedUrlSchemes) ? opts.allowedUrlSchemes : DEFAULT_URL_SCHEMES,
+      imageSchemes: Array.isArray(opts.allowedImageSchemes) ? opts.allowedImageSchemes : DEFAULT_IMAGE_SCHEMES,
+      iframeAllowlist: Array.isArray(opts.iframeAllowlist) ? opts.iframeAllowlist : DEFAULT_IFRAME_ALLOWLIST,
+      iframeSandbox: typeof opts.iframeSandbox === 'string' ? opts.iframeSandbox : DEFAULT_IFRAME_SANDBOX,
+      iframeAllow: typeof opts.iframeAllow === 'string' ? opts.iframeAllow : DEFAULT_IFRAME_ALLOW,
+      readOnly: !!opts.readOnly,
+    };
+
+    const self = this;
+
+    function sanitizeHTML(html: string, sanOpts?: Partial<SanitizeOptions>): string {
+      const allowedTags = new Set((sanOpts && sanOpts.allowedTags) || []);
+      const allowedAttrs = new Set((sanOpts && sanOpts.allowedAttributes) || []);
+      const container = document.createElement('div');
+      container.innerHTML = String(html || '');
+      const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT, null);
+      const toUnwrap: Element[] = [];
+      const comments: Node[] = [];
+      while (walker.nextNode()) {
+        const node = walker.currentNode as Element;
+        if (node.nodeType === 8) { comments.push(node); continue; }
+        const tag = node.tagName ? node.tagName.toLowerCase() : '';
+        if (tag && !allowedTags.has(tag)) {
+          toUnwrap.push(node);
+          continue;
+        }
+        if (node.attributes) {
+          const attrs = Array.prototype.slice.call(node.attributes) as Attr[];
+          attrs.forEach((attr) => {
+            const aname = attr.name.toLowerCase();
+            if (aname.startsWith('on')) { node.removeAttribute(attr.name); return; }
+            if (!allowedAttrs.has(aname)) { node.removeAttribute(attr.name); return; }
+            if (aname === 'href' && attr.value) { if (!isSafeUrl(attr.value, self.options.urlSchemes)) { node.removeAttribute(attr.name); } }
+            if (aname === 'src' && attr.value && tag === 'img') { if (!isSafeUrl(attr.value, self.options.imageSchemes)) { node.removeAttribute(attr.name); } }
+          });
+        }
+        if (tag === 'iframe') {
+          const src = node.getAttribute('src') || '';
+          if (!isAllowedIframeUrl(src)) {
+            toUnwrap.push(node);
+          } else {
+            if (self.options.iframeSandbox) node.setAttribute('sandbox', self.options.iframeSandbox);
+            if (self.options.iframeAllow) node.setAttribute('allow', self.options.iframeAllow);
+            node.setAttribute('frameborder', '0');
+            (node as HTMLElement).style.maxWidth = '100%';
+            (node as HTMLElement).style.border = '0';
+          }
+        }
+      }
+      comments.forEach((c) => { if (c.parentNode) c.parentNode.removeChild(c); });
+      toUnwrap.forEach((node) => {
+        if (!node.parentNode) return;
+        while (node.firstChild) { node.parentNode.insertBefore(node.firstChild, node); }
+        node.parentNode.removeChild(node);
+      });
+      return container.innerHTML;
+    }
+
+    function isSafeUrl(url: string, schemes: string[]): boolean {
+      try {
+        const u = new URL(url, window.location.origin);
+        return schemes.indexOf(u.protocol.replace(':', '')) !== -1;
+      } catch (_) { return false; }
+    }
+
+    function isAllowedIframeUrl(url: string): boolean {
+      try {
+        const u = new URL(url, window.location.origin);
+        const host = u.hostname.toLowerCase();
+        return self.options.iframeAllowlist.some((allowed) => host === allowed || host.endsWith('.' + allowed));
+      } catch (_) { return false; }
+    }
+
+    this.utils = { sanitizeHTML, isSafeUrl, isAllowedIframeUrl };
+
+    const toolbarHTML = TulihEditor.pluginManager.getToolbarHTML(self.features, opts.toolbar);
+    const modalHTML = TulihEditor.pluginManager.getModalHTML(self.features);
+    const wrapper = document.createElement('div') as TeWrapperElement;
+    wrapper.innerHTML = buildEditorHTML(toolbarHTML, modalHTML);
+    el.style.display = 'none';
+    el.parentNode!.insertBefore(wrapper, el.nextSibling);
+
+    const editorEl = wrapper.querySelector('.te-editor') as TeEditorElement;
+    const toolbarEl = wrapper.querySelector('.te-toolbar') as HTMLElement;
+
+    try { const raw = textarea.value || ''; const safeInit = sanitizeHTML(raw, self.options.sanitize); editorEl.innerHTML = safeInit; } catch (_) { /* ignore */ }
+    try { H.normalizeParagraphs(editorEl); H.ensureInitialParagraph(editorEl); } catch (_) { /* ignore */ }
+    try { H.ensureInitialParagraph(editorEl); } catch (_) { /* ignore */ }
+
+    if (opts.height) {
+      editorEl.style.height = typeof opts.height === 'number' ? opts.height + 'px' : String(opts.height);
+      editorEl.style.overflow = 'auto';
+    }
+
+    this.container = wrapper;
+    this.editor = editorEl;
+    this.toolbar = toolbarEl;
+    this.textarea = textarea;
+
+    try { document.execCommand('defaultParagraphSeparator', false, 'p'); } catch (_) { /* ignore */ }
+
+    function updateActiveStates(): void {
+      try {
+        ['bold', 'italic', 'underline', 'strikeThrough'].forEach((cmd) => {
+          const btn = toolbarEl.querySelector('[data-cmd="' + cmd + '"]');
+          if (!btn) return;
+          if (document.queryCommandState(cmd)) btn.classList.add('active');
+          else btn.classList.remove('active');
+        });
+        const undoBtn = toolbarEl.querySelector('[data-cmd="undo"]') as HTMLButtonElement | null;
+        const redoBtn = toolbarEl.querySelector('[data-cmd="redo"]') as HTMLButtonElement | null;
+        const h = editorEl._tableHist;
+        if (undoBtn) {
+          const canUndo = document.queryCommandEnabled('undo') || (h && h.undo.length > 0);
+          undoBtn.toggleAttribute('disabled', !canUndo);
+        }
+        if (redoBtn) {
+          const canRedo = document.queryCommandEnabled('redo') || (h && h.redo.length > 0);
+          redoBtn.toggleAttribute('disabled', !canRedo);
+        }
+        const sel = window.getSelection();
+        let node: Node | null = sel && sel.anchorNode;
+        if (node && node.nodeType === 3) node = node.parentNode;
+        const elNode = node as Element | null;
+        const inOL = elNode && elNode.closest && elNode.closest('ol');
+        const inUL = elNode && elNode.closest && elNode.closest('ul');
+        const olBtn = toolbarEl.querySelector('[data-cmd="insertOrderedList"]');
+        const ulBtn = toolbarEl.querySelector('[data-cmd="insertUnorderedList"]');
+        if (olBtn) olBtn.classList.toggle('active', !!inOL);
+        if (ulBtn) ulBtn.classList.toggle('active', !!inUL);
+      } catch (_) { /* ignore */ }
+    }
+
+    document.addEventListener('selectionchange', () => {
+      if (wrapper.contains(document.activeElement)) { updateActiveStates(); }
+    });
+
+    toolbarEl.querySelectorAll('[data-cmd]').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const cmd = btn.getAttribute('data-cmd');
+        const val = btn.getAttribute('data-val') || undefined;
+        if (cmd === 'createLink' || cmd === 'insertImage' || cmd === 'insertIframe' || cmd === 'insertTable' || cmd === 'editSource' || cmd === 'indent' || cmd === 'outdent' || cmd === 'findReplace' || cmd === 'togglePastePlain' || cmd === 'specialChars' || cmd === 'fullscreen' || cmd === 'emoji' || cmd === 'codeBlock' || cmd === 'toggleReadOnly' || cmd === 'shortcutsHelp' || cmd === 'alignLeft' || cmd === 'alignCenter' || cmd === 'alignRight' || cmd === 'alignJustify' || cmd === 'toggleDark' || cmd === 'customizeShortcuts') {
+          return;
+        }
+        function clearFrHighlights(): void {
+          editorEl.querySelectorAll('.te-fr-match, .te-fr-active').forEach((m) => {
+            const parent = m.parentNode;
+            if (!parent) return;
+            while (m.firstChild) parent.insertBefore(m.firstChild, m);
+            parent.removeChild(m);
+          });
+        }
+        if (cmd === 'undo') {
+          const h = editorEl._tableHist;
+          if (h && h.undo.length) {
+            clearFrHighlights();
+            h.redo.push(editorEl.innerHTML);
+            editorEl.contentEditable = 'false';
+            editorEl.innerHTML = h.undo.pop() as string;
+            editorEl.contentEditable = 'true';
+            clearFrHighlights();
+            editorEl.focus();
+            updateActiveStates();
+            return;
+          }
+        }
+        if (cmd === 'redo') {
+          const h = editorEl._tableHist;
+          if (h && h.redo.length) {
+            clearFrHighlights();
+            h.undo.push(editorEl.innerHTML);
+            editorEl.contentEditable = 'false';
+            editorEl.innerHTML = h.redo.pop() as string;
+            editorEl.contentEditable = 'true';
+            clearFrHighlights();
+            editorEl.focus();
+            updateActiveStates();
+            return;
+          }
+        }
+        document.execCommand(cmd as string, false, val);
+        editorEl.focus();
+        updateActiveStates();
+      });
+    });
+
+    wrapper.querySelectorAll('[data-te-close]').forEach((x) => {
+      x.addEventListener('click', () => {
+        const modal = (x as Element).closest('.te-modal');
+        if (modal) modal.classList.remove('is-open');
+      });
+    });
+
+    try { H.ensureInitialParagraph(editorEl); } catch (_) { /* ignore */ }
+
+    function saveSel(): void {
+      const s = window.getSelection();
+      if (s && s.rangeCount > 0) { wrapper.__savedRange = s.getRangeAt(0).cloneRange(); }
+    }
+    function restoreSel(): void {
+      const r = wrapper.__savedRange;
+      if (!r) return;
+      const s = window.getSelection();
+      if (!s) return;
+      s.removeAllRanges();
+      s.addRange(r);
+    }
+
+    function insertImageFile(file: File | Blob): void {
+      const handler = TulihEditor.onUploadImage || function (f: File | Blob, cb: (url: string) => void): void {
+        const r = new FileReader();
+        r.onload = () => { cb(r.result as string); };
+        r.readAsDataURL(f);
+      };
+      handler(file, (url) => {
+        if (!url) return;
+        const name = (file as File).name || '';
+        const html = '<img src="' + url.replace(/"/g, '&quot;') + '" alt="' + name.replace(/"/g, '&quot;') + '" style="max-width:100%;" />';
+        document.execCommand('insertHTML', false, html);
+      });
+    }
+
+    function cleanWordHtml(html: string): string {
+      if (!html) return '';
+      let out = String(html);
+      if (out.indexOf('mso-') === -1 && out.indexOf('xmlns:o') === -1 && out.indexOf('google-docs') === -1) return out;
+      out = out.replace(/<!--[\s\S]*?-->/g, '');
+      out = out.replace(/<meta[^>]*>/gi, '');
+      out = out.replace(/<link[^>]*>/gi, '');
+      out = out.replace(/<o:[^>]*>[\s\S]*?<\/o:[^>]*>/gi, '');
+      out = out.replace(/<w:[^>]*>[\s\S]*?<\/w:[^>]*>/gi, '');
+      out = out.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '');
+      out = out.replace(/ class="[^"]*Mso[^"]*"/gi, '');
+      out = out.replace(/ class="[^"]*" style=""/gi, '');
+      out = out.replace(/ style="[^"]*mso-[^;]*[^"]*"/gi, '');
+      out = out.replace(/<span[^>]*style="[^"]*mso-[^"]*"[^>]*>/gi, '<span>');
+      out = out.replace(/<span[^>]*><\/span>/gi, '');
+      out = out.replace(/(<(p|h[1-6]|div|span|b|i|u|strong|em))[^>]*>/gi, '$1>');
+      return out;
+    }
+
+    editorEl.addEventListener('paste', (e: ClipboardEvent) => {
+      try {
+        const files = e.clipboardData && e.clipboardData.files;
+        if (files && files.length > 0) {
+          let pasted = false;
+          for (let fi = 0; fi < files.length; fi++) {
+            if (/^image\//i.test(files[fi].type)) {
+              if (!pasted) { e.preventDefault(); pasted = true; }
+              insertImageFile(files[fi]);
+            }
+          }
+          if (pasted) return;
+        }
+        const items = e.clipboardData && e.clipboardData.items;
+        if (items && items.length > 0) {
+          for (let ii = 0; ii < items.length; ii++) {
+            if (items[ii].kind === 'file' && /^image\//i.test(items[ii].type)) {
+              e.preventDefault();
+              const imgFile = items[ii].getAsFile();
+              if (imgFile) { insertImageFile(imgFile); }
+              return;
+            }
+          }
+        }
+        if (window.navigator && window.navigator.clipboard && typeof window.navigator.clipboard.read === 'function') {
+          window.navigator.clipboard.read().then((clipItems) => {
+            for (let ci = 0; ci < clipItems.length; ci++) {
+              const ciTypes = clipItems[ci].types || [];
+              for (let ct = 0; ct < ciTypes.length; ct++) {
+                if (/^image\//i.test(ciTypes[ct])) {
+                  clipItems[ci].getType(ciTypes[ct]).then((blob) => {
+                    insertImageFile(blob);
+                  });
+                  break;
+                }
+              }
+            }
+          }).catch(() => { /* ignore */ });
+        }
+        e.preventDefault();
+        const rawHtml = (e.clipboardData && e.clipboardData.getData('text/html')) || '';
+        const text = (e.clipboardData && e.clipboardData.getData('text/plain')) || '';
+        const toInsert = cleanWordHtml(rawHtml) || (text ? '<p>' + text.replace(/\n/g, '<br>') + '</p>' : '');
+        const safe = sanitizeHTML(toInsert, self.options.sanitize);
+        document.execCommand('insertHTML', false, safe);
+        setTimeout(() => { try { H.ensureInitialParagraph(editorEl); H.normalizeParagraphs(editorEl); } catch (_) { /* ignore */ } }, 0);
+      } catch (_) { setTimeout(() => { H.normalizeParagraphs(editorEl); }, 0); }
+    });
+
+    editorEl.addEventListener('focus', () => { try { H.ensureInitialParagraph(editorEl); } catch (_) { /* ignore */ } });
+    editorEl.addEventListener('input', () => {
+      setTimeout(() => { try { H.ensureInitialParagraph(editorEl); H.normalizeParagraphs(editorEl); } catch (_) { /* ignore */ } }, 0);
+    });
+
+    const ctx: PluginContext = {
+      wrapper,
+      editor: editorEl,
+      toolbar: toolbarEl,
+      textarea,
+      features: self.features,
+      options: self.options,
+      utils: self.utils,
+      TulihEditor,
+      saveSel,
+      restoreSel,
+      updateActiveStates,
+    };
+
+    if (isMinimal) {
+      wrapper.classList.add('te-minimal');
+    }
+
+    self._ctx = ctx;
+
+    TulihEditor.pluginManager.initAll(ctx);
+
+    TulihEditor.instances.push(this);
+  }
+
+  getContent(): string {
+    return this.editor ? this.editor.innerHTML : '';
+  }
+
+  setContent(html: string): void {
+    if (!this.editor) return;
+    const safe = this.utils.sanitizeHTML(html, this.options.sanitize);
+    this.editor.innerHTML = safe;
+    try { H.ensureInitialParagraph(this.editor); H.normalizeParagraphs(this.editor); } catch (_) { /* ignore */ }
+  }
+
+  getText(): string {
+    return this.editor ? this.editor.textContent || '' : '';
+  }
+
+  getWordCount(): number {
+    const text = this.getText().trim();
+    if (!text) return 0;
+    return text.split(/\s+/).length;
+  }
+
+  getCharCount(): number {
+    return this.getText().length;
+  }
+
+  setReadOnly(ro: boolean): void {
+    if (!this._ctx) return;
+    const ctx = this._ctx;
+    const isRo = ctx.editor.contentEditable === 'false';
+    if (ro === isRo) return;
+    const btn = ctx.wrapper.querySelector('[data-cmd="toggleReadOnly"]') as HTMLElement | null;
+    if (btn) btn.click();
+  }
+
+  isReadOnly(): boolean {
+    return !!(this._ctx && this._ctx.editor && this._ctx.editor.contentEditable === 'false');
+  }
+
+  destroy(): void {
+    if (!this.container || !this.container.parentNode) return;
+    const instances = this._ctx ? this._ctx.TulihEditor.instances : [];
+    const myIdx = instances.indexOf(this);
+    if (myIdx !== -1) instances.splice(myIdx, 1);
+    if (this._ctx) this._ctx.TulihEditor.pluginManager.destroyAll(this._ctx);
+    const textarea = this.textarea;
+    if (textarea && this.editor) {
+      textarea.value = this.editor.innerHTML;
+      textarea.style.display = '';
+    }
+    this.container.parentNode.removeChild(this.container);
+    this.editor = null;
+    this.container = null;
+    this.toolbar = null;
+    this._ctx = null;
+  }
+}

package/src/core/PluginManager.ts

@@ -0,0 +1,140 @@
+import type { Plugin, PluginContext, Features, PluginManagerInstance } from '../types';
+
+/**
+ * Registry and lifecycle manager for plugins. Resolves toolbar order,
+ * dependency order, and one-time CSS injection.
+ */
+export default class PluginManager implements PluginManagerInstance {
+  private _plugins: Plugin[] = [];
+  private _map: Record<string, Plugin> = {};
+  private _injectedCSS = new Set<string>();
+  private _cssInjected = false;
+
+  register(name: string, plugin: Plugin): this {
+    if (this._map[name]) {
+      throw new Error('Plugin "' + name + '" is already registered');
+    }
+    plugin.name = name;
+    plugin.deps = plugin.deps || [];
+    plugin.order = plugin.order || 100;
+    this._plugins.push(plugin);
+    this._map[name] = plugin;
+    return this;
+  }
+
+  unregister(name: string): void {
+    const plugin = this._map[name];
+    if (!plugin) return;
+    if (plugin.destroy) plugin.destroy(undefined as unknown as PluginContext);
+    const idx = this._plugins.indexOf(plugin);
+    if (idx !== -1) this._plugins.splice(idx, 1);
+    delete this._map[name];
+  }
+
+  get(name: string): Plugin | null {
+    return this._map[name] || null;
+  }
+
+  has(name: string): boolean {
+    return !!this._map[name];
+  }
+
+  getNames(): string[] {
+    return Object.keys(this._map);
+  }
+
+  private _resolveOrder(): Plugin[] {
+    const sorted: Plugin[] = [];
+    const visited: Record<string, boolean> = {};
+    const visiting: Record<string, boolean> = {};
+    const map = this._map;
+
+    function visit(name: string): void {
+      if (visited[name]) return;
+      if (visiting[name]) throw new Error('Circular dependency: ' + name);
+      visiting[name] = true;
+      const p = map[name];
+      if (p && p.deps) {
+        p.deps.forEach((dep) => {
+          if (!map[dep]) throw new Error('Plugin "' + name + '" depends on "' + dep + '" but not registered');
+          visit(dep);
+        });
+      }
+      visiting[name] = false;
+      visited[name] = true;
+      sorted.push(map[name]);
+    }
+
+    const ordered = this._plugins.slice().sort((a, b) => (a.order || 0) - (b.order || 0));
+    ordered.forEach((p) => visit(p.name));
+
+    return sorted;
+  }
+
+  initAll(ctx: PluginContext): void {
+    this._resolveOrder().forEach((plugin) => {
+      if (plugin.init) plugin.init(ctx);
+    });
+  }
+
+  destroyAll(ctx: PluginContext): void {
+    const reversed = this._plugins.slice().reverse();
+    reversed.forEach((plugin) => {
+      if (plugin.destroy) plugin.destroy(ctx);
+    });
+  }
+
+  getToolbarHTML(features: Features, toolbar?: string[][]): string {
+    if (toolbar && Array.isArray(toolbar)) {
+      const parts: string[] = [];
+      toolbar.forEach((group, i) => {
+        if (i > 0) parts.push('<div class="te-divider"></div>');
+        group.forEach((name) => {
+          const p = this._map[name];
+          if (!p || features[name] === false) return;
+          const html = typeof p.toolbarHTML === 'function' ? p.toolbarHTML(features) : p.toolbarHTML;
+          if (html) parts.push(html);
+        });
+      });
+      return parts.join('\n');
+    }
+
+    const plugins = this._resolveOrder().filter((p) => features[p.name] !== false && p.toolbarHTML);
+    const parts: string[] = [];
+    let lastGroup = -1;
+    plugins.forEach((p) => {
+      const html = typeof p.toolbarHTML === 'function' ? p.toolbarHTML(features) : p.toolbarHTML;
+      if (!html) return;
+      const group = Math.floor((p.order || 0) / 10);
+      if (lastGroup !== -1 && group !== lastGroup) {
+        parts.push('<div class="te-divider"></div>');
+      }
+      parts.push(html);
+      lastGroup = group;
+    });
+    return parts.join('\n');
+  }
+
+  getModalHTML(features: Features): string {
+    const plugins = this._resolveOrder().filter((p) => features[p.name] !== false && p.modalHTML);
+    return plugins
+      .map((p) => (typeof p.modalHTML === 'function' ? p.modalHTML(features) : p.modalHTML))
+      .filter(Boolean)
+      .join('\n');
+  }
+
+  injectAllCSS(): void {
+    if (this._cssInjected) return;
+    this._cssInjected = true;
+    this._resolveOrder().forEach((p) => {
+      if (!p.css || this._injectedCSS.has(p.name)) return;
+      this._injectedCSS.add(p.name);
+      const cssText = typeof p.css === 'function' ? p.css({}) : p.css;
+      if (!cssText) return;
+      const style = document.createElement('style');
+      style.setAttribute('data-te-css', p.name);
+      style.textContent = cssText;
+      document.head.appendChild(style);
+    });
+  }
+}