tulih-editor 0.1.0

package/src/core/helpers.ts

@@ -0,0 +1,209 @@
+/**
+ * Shared DOM utilities used by the editor core and plugins.
+ */
+
+const blockSelector = 'p,h1,h2,h3,blockquote,pre,ul,ol,li,table,hr,iframe,.te-embed';
+const inlineTags = ['A', 'B', 'I', 'U', 'S', 'STRONG', 'EM', 'SPAN', 'SMALL', 'MARK', 'CODE', 'KBD', 'SUB', 'SUP'];
+
+function qs(selector: string, root?: Document | Element | null): Element | null {
+  return (root || document).querySelector(selector);
+}
+
+function qsa(selector: string, root?: Document | Element | null): Element[] {
+  return Array.prototype.slice.call((root || document).querySelectorAll(selector));
+}
+
+function exec(command: string, value?: string): void {
+  document.execCommand(command, false, value);
+}
+
+function getSelectionHtml(): string {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) return '';
+  const range = selection.getRangeAt(0).cloneRange();
+  const div = document.createElement('div');
+  div.appendChild(range.cloneContents());
+  return div.innerHTML;
+}
+
+function hasBlockDescendant(el: Element): boolean {
+  return !!el.querySelector(blockSelector);
+}
+
+function isInlineElement(el: Node): boolean {
+  if (el.nodeType !== 1) return false;
+  const tag = (el as Element).tagName;
+  if (tag === 'IMG' || tag === 'BR' || tag === 'IFRAME') return true;
+  return inlineTags.indexOf(tag) !== -1;
+}
+
+function wrapNodeInP(node: Node): HTMLParagraphElement {
+  const p = document.createElement('p');
+  node.parentNode!.insertBefore(p, node);
+  p.appendChild(node);
+  return p;
+}
+
+function wrapIframe(node: Element | null): HTMLDivElement | undefined {
+  if (!node || node.tagName !== 'IFRAME') return;
+  const wrapper = document.createElement('div');
+  wrapper.className = 'te-embed';
+  wrapper.setAttribute('contenteditable', 'false');
+  node.setAttribute('contenteditable', 'false');
+  node.setAttribute('draggable', 'false');
+  node.setAttribute('tabindex', '-1');
+  node.parentNode!.insertBefore(wrapper, node);
+  wrapper.appendChild(node);
+  return wrapper;
+}
+
+function normalizeParagraphs(root: Element | null): void {
+  if (!root) return;
+  let child = root.firstChild;
+  while (child) {
+    const next = child.nextSibling;
+    if (child.nodeType === 3) {
+      if ((child.textContent || '').trim() === '') {
+        root.removeChild(child);
+      } else {
+        wrapNodeInP(child);
+      }
+    } else if (child.nodeType === 1) {
+      const el = child as Element;
+      const tag = el.tagName;
+      if (tag === 'DIV') {
+        if (el.classList.contains('te-embed') || el.querySelector('iframe,video,audio,.te-embed')) {
+          // keep embed wrappers intact
+        } else if (!hasBlockDescendant(el)) {
+          const p = document.createElement('p');
+          while (el.firstChild) {
+            p.appendChild(el.firstChild);
+          }
+          root.replaceChild(p, el);
+        }
+      } else if (tag === 'IFRAME') {
+        wrapIframe(el);
+      } else if (isInlineElement(el)) {
+        wrapNodeInP(el);
+      }
+    }
+    child = next;
+  }
+}
+
+function ensureInitialParagraph(root: Element | null): void {
+  if (!root) return;
+  if (root.querySelector(blockSelector)) return;
+  if (!root.firstChild) {
+    const p0 = document.createElement('p');
+    p0.innerHTML = '<br>';
+    root.appendChild(p0);
+    return;
+  }
+  const p = document.createElement('p');
+  while (root.firstChild) {
+    p.appendChild(root.firstChild);
+  }
+  root.appendChild(p);
+}
+
+function isInsideEditor(editor: Element, node: Node | null): boolean {
+  if (!node) return false;
+  if (node === editor) return true;
+  return editor.contains(node);
+}
+
+function getBlockElement(editor: Element): Element | null {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return null;
+  let node: Node | null = sel.anchorNode;
+  if (node && node.nodeType === 3) node = node.parentNode;
+  if (!isInsideEditor(editor, node)) return null;
+  if (node && (node as Element).closest) {
+    return (node as Element).closest('p,h1,h2,h3,blockquote,pre,li,div');
+  }
+  return null;
+}
+
+function setBtnActive(toolbar: Element | null, selector: string, active: boolean): void {
+  if (!toolbar) return;
+  const btn = toolbar.querySelector(selector);
+  if (!btn) return;
+  if (active) btn.classList.add('active');
+  else btn.classList.remove('active');
+}
+
+function updateToolbarState(
+  editor: HTMLElement,
+  blockSelect: HTMLSelectElement | null,
+  alignSelect: HTMLSelectElement | null,
+  toolbar: HTMLElement | null,
+): void {
+  const blockEl = getBlockElement(editor);
+  if (blockSelect) {
+    let tag = '';
+    if (blockEl) {
+      let t = blockEl.tagName.toLowerCase();
+      if (t === 'div' || t === 'li') t = 'p';
+      if (['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre'].indexOf(t) !== -1) {
+        tag = t;
+      }
+    }
+    blockSelect.value = tag || 'p';
+  }
+  if (alignSelect) {
+    let align = '';
+    if (blockEl) {
+      try {
+        const cs = window.getComputedStyle(blockEl);
+        let ta = cs && cs.textAlign ? cs.textAlign.toLowerCase() : '';
+        if (ta === 'start') ta = 'left';
+        if (ta === 'left' || ta === 'center' || ta === 'right' || ta === 'justify') {
+          align = ta;
+        }
+      } catch (_) { /* ignore */ }
+    }
+    alignSelect.value = align || '';
+  }
+  try {
+    setBtnActive(toolbar, '[data-cmd="bold"]', document.queryCommandState('bold'));
+    setBtnActive(toolbar, '[data-cmd="italic"]', document.queryCommandState('italic'));
+    setBtnActive(toolbar, '[data-cmd="underline"]', document.queryCommandState('underline'));
+    setBtnActive(toolbar, '[data-cmd="strikeThrough"]', document.queryCommandState('strikeThrough'));
+  } catch (_) { /* ignore */ }
+  let inOL = false;
+  let inUL = false;
+  if (blockEl && blockEl.closest) {
+    inOL = !!blockEl.closest('ol');
+    inUL = !!blockEl.closest('ul');
+  }
+  setBtnActive(toolbar, '[data-cmd="insertOrderedList"]', inOL);
+  setBtnActive(toolbar, '[data-cmd="insertUnorderedList"]', inUL);
+  const isQuote = blockEl && blockEl.tagName === 'BLOCKQUOTE';
+  const isPre = blockEl && blockEl.tagName === 'PRE';
+  setBtnActive(toolbar, '[data-cmd="formatBlock"][data-val="blockquote"]', !!isQuote);
+  setBtnActive(toolbar, '[data-cmd="formatBlock"][data-val="pre"]', !!isPre);
+}
+
+function escapeHtml(str: string): string {
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+function removeNode(node: Node | null): void {
+  if (node && node.parentNode) {
+    node.parentNode.removeChild(node);
+  }
+}
+
+export {
+  qs, qsa, exec, getSelectionHtml,
+  blockSelector, inlineTags, hasBlockDescendant, isInlineElement,
+  wrapNodeInP, wrapIframe, normalizeParagraphs, ensureInitialParagraph,
+  isInsideEditor, getBlockElement, setBtnActive, updateToolbarState,
+  escapeHtml, removeNode,
+};

package/src/css.d.ts

@@ -0,0 +1,2 @@
+// Allow side-effect CSS imports (resolved by Vite at build time).
+declare module '*.css';

package/src/index.ts

@@ -0,0 +1,87 @@
+import './styles/index.css';
+
+import PluginManager from './core/PluginManager';
+import Editor from './core/Editor';
+import registerDefaultPlugins from './plugins/index';
+import type {
+  EditorOptions,
+  EditorInstance,
+  BrowseImageHandler,
+  TulihEditorStatic,
+} from './types';
+
+const pm = new PluginManager();
+registerDefaultPlugins(pm);
+pm.injectAllCSS();
+
+// Auto-load the Tabler Icons webfont (used by toolbar buttons) unless it is
+// already present on the page. Tabler Icons is MIT licensed
+// (https://github.com/tabler/tabler-icons). Pinned to the v3 line to avoid
+// unexpected breaking changes from a future major release.
+(function loadTablerIcons(): void {
+  if (typeof document === 'undefined') return;
+  if (document.querySelector('link[href*="tabler-icons"]')) return;
+  const l = document.createElement('link');
+  l.rel = 'stylesheet';
+  l.href = 'https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3/dist/tabler-icons.min.css';
+  document.head.appendChild(l);
+})();
+
+const TulihEditor: TulihEditorStatic = {
+  pluginManager: pm,
+  instances: [],
+  onBrowseImage: null,
+  onUploadImage: null,
+
+  setBrowseImage(handler: BrowseImageHandler): void {
+    this.onBrowseImage = handler;
+  },
+
+  attach(target: string | Element, options?: EditorOptions): EditorInstance | undefined {
+    const el = (typeof target === 'string' ? document.querySelector(target) : target) as HTMLElement | null;
+    if (!el) return;
+    if (String(el.tagName).toUpperCase() !== 'TEXTAREA' && !(el.matches && el.matches('textarea[data-tulih-editor]'))) return;
+    const sibling = el.nextElementSibling;
+    if (sibling && sibling.querySelector && sibling.querySelector('.te-editor')) return;
+
+    return new Editor(el, options, TulihEditor);
+  },
+
+  create(target: string | Element, options?: EditorOptions): EditorInstance | undefined {
+    return this.attach(target, options);
+  },
+};
+
+if (typeof document !== 'undefined') {
+  document.addEventListener('DOMContentLoaded', () => {
+    const allTA = document.querySelectorAll('textarea[data-tulih-editor]');
+    allTA.forEach((ta) => { TulihEditor.attach(ta); });
+  });
+}
+
+// Expose the classes on the default object for advanced/UMD consumers without
+// adding runtime *named* exports (those would turn the UMD global into
+// `TulihEditor.default`, breaking the documented `<script>` usage).
+(TulihEditor as TulihEditorStatic & { Editor: typeof Editor; PluginManager: typeof PluginManager }).Editor = Editor;
+(TulihEditor as TulihEditorStatic & { Editor: typeof Editor; PluginManager: typeof PluginManager }).PluginManager = PluginManager;
+
+export default TulihEditor;
+export type {
+  Plugin,
+  PluginContext,
+  EditorOptions,
+  EditorInstance,
+  Features,
+  SanitizeOptions,
+  ResolvedOptions,
+  EditorUtils,
+  UploadImageHandler,
+  BrowseImageHandler,
+  TulihEditorStatic,
+  PluginManagerInstance,
+  HTMLProvider,
+  CSSProvider,
+  TeHistory,
+  TeEditorElement,
+  TeWrapperElement,
+} from './types';

package/src/plugins/align.ts

@@ -0,0 +1,72 @@
+import type { Plugin, PluginContext } from '../types';
+
+var ALIGN_CMDS: Record<string, { exec: string; match: string }> = {
+  alignLeft:    { exec: 'justifyLeft',   match: 'left' },
+  alignCenter:  { exec: 'justifyCenter', match: 'center' },
+  alignRight:   { exec: 'justifyRight',  match: 'right' },
+  alignJustify: { exec: 'justifyFull',   match: 'justify' }
+};
+
+function getBlockAlignment(node: Node | null): string {
+  if(!node || node.nodeType === 3) node = node ? node.parentNode : null;
+  if(!node) return '';
+  var el = (node as Element).closest ? (node as Element).closest('p,h1,h2,h3,h4,h5,h6,li,div,blockquote') : null;
+  if(!el) return '';
+  try {
+    var cs = window.getComputedStyle(el);
+    var ta = cs.textAlign.toLowerCase();
+    if(ta === 'start') return 'left';
+    return ta;
+  } catch(_){ return ''; }
+}
+
+const align: Plugin = {
+  name: 'align',
+  order: 40,
+  css: '',
+  toolbarHTML: '' +
+    '<button type="button" class="btn btn-sm btn-light te-align-btn" title="Align left" data-cmd="alignLeft"><i class="ti ti-align-left"></i></button>' +
+    '<button type="button" class="btn btn-sm btn-light te-align-btn" title="Align center" data-cmd="alignCenter"><i class="ti ti-align-center"></i></button>' +
+    '<button type="button" class="btn btn-sm btn-light te-align-btn" title="Align right" data-cmd="alignRight"><i class="ti ti-align-right"></i></button>' +
+    '<button type="button" class="btn btn-sm btn-light te-align-btn" title="Justify" data-cmd="alignJustify"><i class="ti ti-align-justified"></i></button>',
+  init(ctx: PluginContext): void {
+    if(!ctx.features.align) return;
+    var names = Object.keys(ALIGN_CMDS);
+
+    names.forEach(function(name){
+      var btn = ctx.wrapper.querySelector('[data-cmd="' + name + '"]') as HTMLElement | null;
+      if(!btn) return;
+      var cmd = ALIGN_CMDS[name];
+      btn.addEventListener('click', function(){
+        var align = getBlockAlignment(window.getSelection()!.anchorNode);
+
+        if(align === cmd.match){
+          document.execCommand('justifyLeft', false, undefined);
+        } else {
+          document.execCommand(cmd.exec, false, undefined);
+        }
+        ctx.editor.focus();
+        updateActive();
+      });
+    });
+
+    function updateActive(): void {
+      var node = window.getSelection()!.anchorNode;
+      if(!node || !ctx.wrapper.contains(node)) return;
+      var align = getBlockAlignment(node);
+      names.forEach(function(name){
+        var btn = ctx.wrapper.querySelector('[data-cmd="' + name + '"]') as HTMLElement | null;
+        if(!btn) return;
+        btn.classList.toggle('active', align === ALIGN_CMDS[name].match);
+      });
+    }
+
+    document.addEventListener('selectionchange', function(){
+      if(document.activeElement === ctx.editor || ctx.editor.contains(document.activeElement)){
+        updateActive();
+      }
+    });
+  }
+};
+
+export default align;

package/src/plugins/autoLinkify.ts

@@ -0,0 +1,34 @@
+import type { Plugin, PluginContext } from '../types';
+
+var URL_RE = /(?:https?:\/\/|www\.)[^\s<>"'()]+(?:\.[^\s<>"'()]+)*/gi;
+
+const autoLinkify: Plugin = {
+  name: 'autoLinkify',
+  order: 1,
+  init(ctx: PluginContext): void {
+    if (ctx.features.autoLinkify === false) return;
+    var editor = ctx.editor;
+
+    editor.addEventListener('paste', function (e: ClipboardEvent) {
+      var text = (e.clipboardData && e.clipboardData.getData('text/plain')) || '';
+      if (!text) return;
+
+      text = text.trim();
+
+      if (URL_RE.test(text)) {
+        URL_RE.lastIndex = 0;
+        var url = text.match(URL_RE)![0];
+        var fullUrl = url.indexOf('://') === -1 ? 'https://' + url : url;
+        var isOk = ctx.utils.isSafeUrl ? ctx.utils.isSafeUrl(fullUrl, ctx.options.urlSchemes || ['http', 'https', 'mailto', 'tel']) : true;
+        if (isOk) {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          var html = '<p><a href="' + fullUrl.replace(/"/g, '&quot;') + '" target="_blank" rel="noopener noreferrer">' + url.replace(/</g, '&lt;').replace(/>/g, '&gt;') + '</a></p>';
+          document.execCommand('insertHTML', false, html);
+        }
+      }
+    }, true);
+  }
+};
+
+export default autoLinkify;

package/src/plugins/autosave.ts

@@ -0,0 +1,69 @@
+import type { Plugin, PluginContext } from '../types';
+
+var STORAGE_PREFIX = 'te-autosave-';
+
+function getStorageKey(textarea: HTMLTextAreaElement): string {
+  var id = textarea.id || textarea.name || textarea.className || '';
+  return STORAGE_PREFIX + (id || Math.random().toString(36).slice(2, 8));
+}
+
+const autosave: Plugin = {
+  name: 'autosave',
+  order: 210,
+  css: '' +
+    '.te-autosave-badge {' +
+    '  font-size: .7rem; padding: 1px 6px; border-radius: 8px;' +
+    '  line-height: 1.4; opacity: .6; margin-left: auto;' +
+    '}' +
+    '.te-autosave-badge.saved { background: #d1e7dd; color: #0f5132; }' +
+    '.te-autosave-badge.unsaved { background: #fff3cd; color: #664d03; }',
+  init(ctx: PluginContext): void {
+    if(!ctx.features.autosave) return;
+
+    var key = getStorageKey(ctx.textarea);
+
+    try {
+      var saved = localStorage.getItem(key);
+      if(saved && saved !== ctx.editor.innerHTML){
+        ctx.editor.innerHTML = saved;
+      }
+    } catch(_){}
+
+    var badge = document.createElement('span');
+    badge.className = 'te-autosave-badge saved';
+    badge.textContent = 'Saved';
+    var rightEl = ctx.wrapper.querySelector('.te-status-right') as HTMLElement | null;
+    if(rightEl){
+      rightEl.style.display = 'inline-flex';
+      rightEl.style.alignItems = 'center';
+      rightEl.style.gap = '8px';
+      rightEl.appendChild(badge);
+    }
+
+    function setStatus(saved: boolean): void {
+      badge.textContent = saved ? 'Saved' : 'Unsaved';
+      badge.className = 'te-autosave-badge ' + (saved ? 'saved' : 'unsaved');
+    }
+
+    var saveTimer: ReturnType<typeof setTimeout> | null = null;
+    function save(): void {
+      setStatus(false);
+      if(saveTimer) clearTimeout(saveTimer);
+      saveTimer = setTimeout(function(){
+        try {
+          localStorage.setItem(key, ctx.editor.innerHTML);
+          setStatus(true);
+        } catch(_){}
+      }, 500);
+    }
+
+    ctx.editor.addEventListener('input', save);
+    ctx.editor.addEventListener('paste', save);
+
+    ctx.editor.addEventListener('blur', function(){
+      try { localStorage.removeItem(key); } catch(_){}
+    });
+  }
+};
+
+export default autosave;

package/src/plugins/block.ts

@@ -0,0 +1,32 @@
+import type { Plugin, PluginContext } from '../types';
+
+const block: Plugin = {
+  name: 'block',
+  order: 10,
+  toolbarHTML: '' +
+    '<select class="te-block form-select form-select-sm">' +
+    '  <option value="p">Paragraph</option>' +
+    '  <option value="h1">Heading 1</option>' +
+    '  <option value="h2">Heading 2</option>' +
+    '  <option value="h3">Heading 3</option>' +
+    '  <option value="h4">Heading 4</option>' +
+    '  <option value="h5">Heading 5</option>' +
+    '  <option value="h6">Heading 6</option>' +
+    '  <option value="blockquote">Quote</option>' +
+    '  <option value="pre">Code</option>' +
+    '</select>',
+  init(ctx: PluginContext): void {
+    if (!ctx.features.block) return;
+    const sel = ctx.wrapper.querySelector('.te-block') as HTMLSelectElement | null;
+    if (!sel) return;
+    sel.addEventListener('change', () => {
+      const v = sel.value;
+      if (!v) return;
+      document.execCommand('formatBlock', false, v);
+      ctx.editor.focus();
+      ctx.updateActiveStates();
+    });
+  },
+};
+
+export default block;

package/src/plugins/caseTransform.ts

@@ -0,0 +1,54 @@
+import type { Plugin, PluginContext } from '../types';
+
+const caseTransform: Plugin = {
+  name: 'caseTransform',
+  order: 31,
+  toolbarHTML: '' +
+    '<select class="te-case form-select form-select-sm" title="Change case">' +
+    '  <option value="">Case</option>' +
+    '  <option value="upper">UPPERCASE</option>' +
+    '  <option value="lower">lowercase</option>' +
+    '  <option value="title">Title Case</option>' +
+    '  <option value="sentence">Sentence case</option>' +
+    '</select>',
+  init(ctx: PluginContext): void {
+    if(ctx.features.caseTransform === false) return;
+    var sel = ctx.wrapper.querySelector('.te-case') as HTMLSelectElement | null;
+    if(!sel) return;
+
+    sel.addEventListener('mousedown', function(){
+      ctx.saveSel();
+    });
+
+    sel.addEventListener('change', function(){
+      var v = sel!.value;
+      sel!.value = '';
+      if(!v) return;
+
+      ctx.restoreSel();
+
+      var s = window.getSelection();
+      if(!s || s.isCollapsed || !s.rangeCount) return;
+      var text = s.toString();
+      if(!text) return;
+
+      var transformed: string;
+      switch(v){
+        case 'upper': transformed = text.toUpperCase(); break;
+        case 'lower': transformed = text.toLowerCase(); break;
+        case 'title':
+          transformed = text.toLowerCase().replace(/\b\w/g, function(m){ return m.toUpperCase(); });
+          break;
+        case 'sentence':
+          transformed = text.charAt(0).toUpperCase() + text.slice(1).toLowerCase().replace(/([.!?]\s+)(\w)/g, function(m){ return m.toUpperCase(); });
+          break;
+        default: return;
+      }
+
+      document.execCommand('insertText', false, transformed);
+      ctx.editor.focus();
+    });
+  }
+};
+
+export default caseTransform;

package/src/plugins/codeBlock.ts

@@ -0,0 +1,93 @@
+import type { Plugin, PluginContext } from '../types';
+
+var LANGUAGES = [
+  { id: 'none', label: 'Plain text' },
+  { id: 'markup', label: 'HTML' },
+  { id: 'css', label: 'CSS' },
+  { id: 'javascript', label: 'JavaScript' },
+  { id: 'php', label: 'PHP' },
+  { id: 'python', label: 'Python' },
+  { id: 'java', label: 'Java' },
+  { id: 'c', label: 'C' },
+  { id: 'cpp', label: 'C++' },
+  { id: 'sql', label: 'SQL' },
+  { id: 'bash', label: 'Bash' },
+  { id: 'json', label: 'JSON' },
+  { id: 'typescript', label: 'TypeScript' },
+  { id: 'go', label: 'Go' },
+  { id: 'rust', label: 'Rust' },
+  { id: 'ruby', label: 'Ruby' }
+];
+
+const codeBlock: Plugin = {
+  name: 'codeBlock',
+  order: 23,
+  css: '' +
+    '.te-codeblock-popup {' +
+    '  position: absolute; z-index: 3000;' +
+    '  background: #fff; border: 1px solid #dee2e6;' +
+    '  border-radius: .375rem; box-shadow: 0 6px 20px rgba(0,0,0,.15);' +
+    '  padding: .5rem; min-width: 160px;' +
+    '}' +
+    '.te-codeblock-popup select {' +
+    '  width: 100%; margin-bottom: .5rem;' +
+    '}' +
+    '.te-codeblock-popup .btn { width: 100%; }' +
+    '.te-editor pre {' +
+    '  background: #1e1e2e; border: 1px solid #45475a;' +
+    '  border-left: 4px solid #89b4fa;' +
+    '  border-radius: .375rem; padding: .75rem;' +
+    '  overflow-x: auto; margin: .5rem 0;' +
+    '  font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, monospace;' +
+    '  font-size: .875rem; line-height: 1.6;' +
+    '  color: #cdd6f4;' +
+    '}' +
+    '.te-editor pre code {' +
+    '  background: none; padding: 0; font-size: inherit;' +
+    '  line-height: inherit; color: inherit;' +
+    '}',
+  toolbarHTML: '<button type="button" class="btn btn-sm btn-light" title="Code block" data-cmd="codeBlock"><i class="ti ti-codeblock"></i></button>',
+  init(ctx: PluginContext): void {
+    if(ctx.features.codeBlock === false) return;
+    var btn = ctx.wrapper.querySelector('[data-cmd="codeBlock"]') as HTMLButtonElement | null;
+    if(!btn) return;
+
+    var popup = document.createElement('div');
+    popup.className = 'te-codeblock-popup';
+    popup.style.display = 'none';
+    popup.innerHTML = '' +
+      '<select class="te-codeblock-lang form-select form-select-sm">' +
+        LANGUAGES.map(function(l){ return '<option value="' + l.id + '">' + l.label + '</option>'; }).join('') +
+      '</select>' +
+      '<button type="button" class="btn btn-sm btn-primary te-codeblock-insert">Insert</button>';
+    document.body.appendChild(popup);
+
+    btn.addEventListener('click', function(e: MouseEvent){
+      var rect = btn!.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';
+    });
+
+    (popup.querySelector('.te-codeblock-insert') as HTMLButtonElement).addEventListener('click', function(){
+      var lang = (popup.querySelector('.te-codeblock-lang') as HTMLSelectElement).value;
+      var sel = window.getSelection();
+      var text = sel ? sel.toString() : '';
+      if(!text) text = 'code';
+      var cls = lang && lang !== 'none' ? ' class="language-' + lang + '"' : '';
+      var html = '<pre><code' + cls + '>' + text.replace(/</g,'&lt;').replace(/>/g,'&gt;') + '</code></pre>';
+      document.execCommand('insertHTML', false, html);
+      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 codeBlock;