tulih-editor 0.1.0

package/src/plugins/link.ts

@@ -0,0 +1,344 @@
+import type { Plugin, PluginContext } from '../types';
+
+const link: Plugin = {
+  name: 'link',
+  order: 50,
+  toolbarHTML: '<button type="button" class="btn btn-sm btn-light" title="Link" data-cmd="createLink"><i class="ti ti-link"></i></button>',
+  css: '' +
+    '.te-link-tools {' +
+    '  position: fixed; display: none; z-index: 3000;' +
+    '  background: #fff; border: 1px solid #dee2e6;' +
+    '  border-radius: .375rem; box-shadow: 0 6px 20px rgba(0,0,0,.15);' +
+    '  padding: .25rem .35rem; gap: .2rem; align-items: center;' +
+    '  white-space: nowrap;' +
+    '}' +
+    '.te-link-tools .btn {' +
+    '  padding: .2rem .45rem !important; font-size: .75rem !important; line-height: 1 !important;' +
+    '}' +
+    '.te-link-tools .btn i,' +
+    '.te-link-tools .btn svg {' +
+    '  width: 12px !important; height: 12px !important;' +
+    '  pointer-events: none;' +
+    '}' +
+    '.te-link-tools .te-divider-v {' +
+    '  display: inline-block; width: 1px; height: 14px;' +
+    '  background: #dee2e6; margin: 0 .15rem; vertical-align: middle;' +
+    '}' +
+    '.te-link-edit-popup {' +
+    '  position: fixed; display: none; z-index: 3001;' +
+    '  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-link-edit-popup input {' +
+    '  width: 220px; padding: .2rem .4rem; font-size: .8rem;' +
+    '  border: 1px solid #dee2e6; border-radius: .25rem; outline: none;' +
+    '}' +
+    '.te-link-edit-popup input:focus {' +
+    '  border-color: #86b7fe; box-shadow: 0 0 0 2px rgba(13,110,253,.15);' +
+    '}' +
+    '.te-link-edit-popup .btn {' +
+    '  padding: .2rem .5rem !important; font-size: .75rem !important; line-height: 1 !important;' +
+    '}',
+  modalHTML: '' +
+    '<div class="te-link-modal te-modal" aria-hidden="true">' +
+    '  <div class="te-modal-backdrop" data-te-close></div>' +
+    '  <div class="te-modal-dialog">' +
+    '    <div class="te-modal-header">' +
+    '      <h5 class="te-modal-title m-0">Insert Link</h5>' +
+    '      <button type="button" class="btn-close" data-te-close aria-label="Close"></button>' +
+    '    </div>' +
+    '    <form class="te-link-form">' +
+    '      <div class="te-modal-body">' +
+    '        <div class="mb-3">' +
+    '          <label class="form-label">URL</label>' +
+    '          <input type="url" class="te-link-url form-control" placeholder="https://example.com" required>' +
+    '        </div>' +
+    '        <div class="mb-3">' +
+    '          <label class="form-label">Text (optional)</label>' +
+    '          <input type="text" class="te-link-text form-control" placeholder="Link text">' +
+    '        </div>' +
+    '        <div class="mb-3">' +
+    '          <label class="form-label">Rel (optional)</label>' +
+    '          <input type="text" class="te-link-rel form-control" placeholder="noopener noreferrer, nofollow, ugc, sponsored">' +
+    '        </div>' +
+    '        <div class="form-check">' +
+    '          <input class="te-link-blank form-check-input" type="checkbox" checked>' +
+    '          <label class="form-check-label">Open in new tab</label>' +
+    '        </div>' +
+    '      </div>' +
+    '      <div class="te-modal-footer">' +
+    '        <button type="button" class="btn btn-outline-secondary" data-te-close>Cancel</button>' +
+    '        <button type="submit" class="btn btn-primary">Insert</button>' +
+    '      </div>' +
+    '    </form>' +
+    '  </div>' +
+    '</div>',
+  init(ctx: PluginContext): void {
+    if(!ctx.features.link) return;
+    var editingLink: HTMLAnchorElement | null = null;
+
+    var linkTools = document.createElement('div');
+    linkTools.className = 'te-link-tools';
+    linkTools.innerHTML = '' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-link="edit" title="Edit link"><i class="ti ti-edit"></i> Edit</button>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-link="remove" title="Remove link"><i class="ti ti-link-off"></i> Remove</button>';
+    document.body.appendChild(linkTools);
+
+    var linkEditPopup = document.createElement('div');
+    linkEditPopup.className = 'te-link-edit-popup';
+    linkEditPopup.innerHTML = '' +
+      '<input type="url" class="te-link-edit-url" placeholder="https://example.com" />' +
+      '<button type="button" class="btn btn-sm btn-primary" data-te-link-edit="apply">Apply</button>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-link-edit="cancel">Cancel</button>';
+    document.body.appendChild(linkEditPopup);
+
+    function posLinkTools(a: HTMLAnchorElement): void {
+      var rect = a.getBoundingClientRect();
+      var er = ctx.editor.getBoundingClientRect();
+      linkTools.style.display = 'flex';
+      linkTools.style.visibility = 'hidden';
+      var tw = linkTools.offsetWidth;
+      var th = linkTools.offsetHeight;
+      var left = rect.left + rect.width / 2 - tw / 2;
+      if(left < er.left) left = er.left;
+      if(left + tw > er.right) left = er.right - tw;
+      linkTools.style.left = left + 'px';
+      var spaceBelow = window.innerHeight - rect.bottom;
+      var top = (spaceBelow >= th + 6) ? (rect.bottom + 6) : (rect.top - th - 6);
+      if(top < er.top) top = rect.bottom + 6;
+      linkTools.style.top = top + 'px';
+      linkTools.style.visibility = '';
+    }
+
+    function hideLinkTools(): void {
+      linkTools.style.display = 'none';
+      editingLink = null;
+    }
+
+    var _editPopupTime = 0;
+
+    function hideEditPopup(_from?: string): void {
+      if(Date.now() - _editPopupTime < 200) return;
+      linkEditPopup.style.display = 'none';
+    }
+
+    function showEditPopup(link: HTMLAnchorElement): void {
+      _editPopupTime = Date.now();
+      var rect = link.getBoundingClientRect();
+      var er = ctx.editor.getBoundingClientRect();
+      linkEditPopup.style.display = 'flex';
+      linkEditPopup.style.visibility = 'hidden';
+      var pw = linkEditPopup.offsetWidth || 350;
+      var ph = linkEditPopup.offsetHeight || 32;
+      var left = rect.left + rect.width / 2 - pw / 2;
+      if(left < er.left) left = er.left;
+      if(left + pw > er.right) left = er.right - pw;
+      linkEditPopup.style.left = left + 'px';
+      var spaceBelow = window.innerHeight - rect.bottom;
+      linkEditPopup.style.top = ((spaceBelow >= ph + 6) ? (rect.bottom + 6) : (rect.top - ph - 6)) + 'px';
+      linkEditPopup.style.visibility = '';
+      (linkEditPopup.querySelector('.te-link-edit-url') as HTMLInputElement).value = link.getAttribute('href') || '';
+      setTimeout(function(){ (linkEditPopup.querySelector('.te-link-edit-url') as HTMLInputElement).focus(); }, 0);
+    }
+
+    function openLinkModal(): void {
+      ctx.saveSel();
+      var m = ctx.wrapper.querySelector('.te-link-modal');
+      if(m) m.classList.add('is-open');
+    }
+
+    function closeLinkModal(): void {
+      var m = ctx.wrapper.querySelector('.te-link-modal');
+      if(m) m.classList.remove('is-open');
+    }
+
+    function fillModal(a: HTMLAnchorElement): void {
+      var u = ctx.wrapper.querySelector('.te-link-url') as HTMLInputElement | null;
+      var t = ctx.wrapper.querySelector('.te-link-text') as HTMLInputElement | null;
+      var r = ctx.wrapper.querySelector('.te-link-rel') as HTMLInputElement | null;
+      var b = ctx.wrapper.querySelector('.te-link-blank') as HTMLInputElement | null;
+      var sub = ctx.wrapper.querySelector('.te-link-form button[type="submit"]') as HTMLButtonElement | null;
+      if(u) u.value = a.getAttribute('href') || '';
+      if(t) t.value = a.textContent || '';
+      if(r) r.value = a.getAttribute('rel') || '';
+      if(b) b.checked = a.getAttribute('target') === '_blank';
+      if(sub) sub.textContent = 'Update';
+    }
+
+    function getSelectedText(): string {
+      var sel = window.getSelection();
+      return (sel && sel.toString().trim()) || '';
+    }
+
+    var btn = ctx.wrapper.querySelector('[data-cmd="createLink"]');
+    if(btn){
+      btn.addEventListener('click', function(){
+        editingLink = null;
+        hideLinkTools();
+        hideEditPopup();
+        var u = ctx.wrapper.querySelector('.te-link-url') as HTMLInputElement | null;
+        var t = ctx.wrapper.querySelector('.te-link-text') as HTMLInputElement | null;
+        var r = ctx.wrapper.querySelector('.te-link-rel') as HTMLInputElement | null;
+        var b = ctx.wrapper.querySelector('.te-link-blank') as HTMLInputElement | null;
+        var sub = ctx.wrapper.querySelector('.te-link-form button[type="submit"]') as HTMLButtonElement | null;
+        if(u) u.value = '';
+        if(t) t.value = getSelectedText() || '';
+        if(r) r.value = '';
+        if(b) b.checked = true;
+        if(sub) sub.textContent = 'Insert';
+        openLinkModal();
+      });
+    }
+
+    ctx.editor.addEventListener('click', function(e: MouseEvent){
+      var a = (e.target as HTMLElement).closest && (e.target as HTMLElement).closest('a') as HTMLAnchorElement | null;
+      if(!a || !ctx.editor.contains(a)) return;
+      if(!ctx.wrapper.contains(a)) return;
+      if(e.ctrlKey || e.metaKey) e.preventDefault();
+      e.stopPropagation();
+      hideEditPopup('editor.click');
+      editingLink = a;
+      fillModal(a);
+      posLinkTools(a);
+    });
+
+    linkTools.addEventListener('mousedown', function(e: MouseEvent){
+      e.preventDefault();
+      e.stopPropagation();
+      var actionBtn = (e.target as HTMLElement).closest && (e.target as HTMLElement).closest('[data-te-link]') as HTMLElement | null;
+      if(!actionBtn) return;
+      var action = actionBtn.getAttribute('data-te-link');
+      var link = editingLink;
+
+      if(action === 'edit'){
+        if(link && ctx.editor.contains(link)){
+          editingLink = link;
+          showEditPopup(link);
+          setTimeout(function(){ linkTools.style.display = 'none'; }, 0);
+        }
+      }
+      else if(action === 'remove'){
+        hideLinkTools();
+        if(link && ctx.editor.contains(link)){
+          var parent = link.parentNode!;
+          while(link.firstChild){
+            parent.insertBefore(link.firstChild, link);
+          }
+          parent.removeChild(link);
+          ctx.editor.focus();
+        }
+      }
+    });
+
+    function updateLink(url: string): void {
+      if(!editingLink || !ctx.editor.contains(editingLink)) return;
+      if(!/^https?:\/\//i.test(url) && !/^mailto:/i.test(url) && !/^tel:/i.test(url)) url = 'https://' + url;
+      editingLink.setAttribute('href', url);
+      hideEditPopup('updateLink');
+      editingLink = null;
+      ctx.editor.focus();
+    }
+
+    linkEditPopup.addEventListener('click', function(e: MouseEvent){ e.stopPropagation(); });
+
+    linkEditPopup.addEventListener('mousedown', function(e: MouseEvent){
+      e.preventDefault();
+      e.stopPropagation();
+      var actionBtn = (e.target as HTMLElement).closest && (e.target as HTMLElement).closest('[data-te-link-edit]') as HTMLElement | null;
+      if(!actionBtn) return;
+      var action = actionBtn.getAttribute('data-te-link-edit');
+
+      if(action === 'cancel'){
+        hideEditPopup();
+        editingLink = null;
+        ctx.editor.focus();
+        return;
+      }
+
+      if(action === 'apply'){
+        var url = (linkEditPopup.querySelector('.te-link-edit-url') as HTMLInputElement).value.trim();
+        if(!url) return;
+        updateLink(url);
+      }
+    });
+
+    linkEditPopup.addEventListener('keydown', function(e: KeyboardEvent){
+      if(e.key === 'Enter'){
+        e.preventDefault();
+        var url = (linkEditPopup.querySelector('.te-link-edit-url') as HTMLInputElement).value.trim();
+        if(!url) return;
+        updateLink(url);
+      }
+      if(e.key === 'Escape'){
+        hideEditPopup();
+        editingLink = null;
+        ctx.editor.focus();
+      }
+    });
+
+    linkTools.addEventListener('click', function(e: MouseEvent){ e.stopPropagation(); });
+
+    document.addEventListener('click', function(e: MouseEvent){
+      if(linkTools.style.display !== 'none' && !linkTools.contains(e.target as Node)){
+        hideLinkTools();
+      }
+      if(linkEditPopup.style.display !== 'none' && !linkEditPopup.contains(e.target as Node)){
+        var fromTools = (e.target as HTMLElement).closest && (e.target as HTMLElement).closest('.te-link-tools');
+        if(!fromTools){
+          if(Date.now() - _editPopupTime < 200){
+            // too soon after showing edit popup, don't close
+          } else {
+            hideEditPopup('doc.click');
+            editingLink = null;
+          }
+        }
+      }
+    });
+
+    var form = ctx.wrapper.querySelector('.te-link-form');
+    if(form){
+      form.addEventListener('submit', function(e: Event){
+        e.preventDefault();
+        var url = ((ctx.wrapper.querySelector('.te-link-url') as HTMLInputElement).value || '').trim();
+        var text = ((ctx.wrapper.querySelector('.te-link-text') as HTMLInputElement).value || '').trim();
+        var blank = (ctx.wrapper.querySelector('.te-link-blank') as HTMLInputElement).checked;
+        var rel = ((ctx.wrapper.querySelector('.te-link-rel') as HTMLInputElement).value || '').trim();
+        if(!url) return;
+        var isOk = ctx.utils.isSafeUrl ? ctx.utils.isSafeUrl(url, (ctx.options as any).urlSchemes || ['http','https']) : true;
+        if(!isOk) return;
+
+        if(editingLink && ctx.editor.contains(editingLink)){
+          editingLink.setAttribute('href', url);
+          if(blank) editingLink.setAttribute('target', '_blank');
+          else editingLink.removeAttribute('target');
+          if(rel) editingLink.setAttribute('rel', rel);
+          else editingLink.removeAttribute('rel');
+          if(text) editingLink.textContent = text;
+          closeLinkModal();
+          ctx.editor.focus();
+          return;
+        }
+
+        ctx.restoreSel();
+        var relFinal = rel || (blank ? 'noopener noreferrer' : '');
+        var displayText = (text || url).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+        var a = '<a href="' + url.replace(/"/g,'&quot;') + '"' +
+          (blank ? ' target="_blank"' : '') +
+          (relFinal ? ' rel="' + relFinal.replace(/"/g,'&quot;') + '"' : '') +
+          '>' + displayText + '</a>';
+        document.execCommand('insertHTML', false, a);
+        closeLinkModal();
+        ctx.editor.focus();
+      });
+    }
+
+    var closeBtns = ctx.wrapper.querySelectorAll('[data-te-close]');
+    for(var i = 0; i < closeBtns.length; i++){
+      closeBtns[i].addEventListener('click', function(){ editingLink = null; });
+    }
+  }
+};
+
+export default link;

package/src/plugins/linkTooltip.ts

@@ -0,0 +1,63 @@
+import type { Plugin, PluginContext } from '../types';
+
+const linkTooltip: Plugin = {
+  name: 'linkTooltip',
+  order: 4,
+  css: '' +
+    '.te-link-tooltip {' +
+    '  position: fixed; z-index: 9999;' +
+    '  background: #333; color: #fff;' +
+    '  padding: 4px 8px; border-radius: 4px;' +
+    '  font-size: .75rem; line-height: 1.4;' +
+    '  max-width: 300px; overflow: hidden;' +
+    '  text-overflow: ellipsis; white-space: nowrap;' +
+    '  pointer-events: none; opacity: 0;' +
+    '  transition: opacity .15s;' +
+    '}' +
+    '.te-link-tooltip.show { opacity: 1; }',
+  init(ctx: PluginContext): void {
+    if(ctx.features.linkTooltip === false) return;
+    var editor = ctx.editor;
+
+    var tooltip = document.createElement('div');
+    tooltip.className = 'te-link-tooltip';
+    document.body.appendChild(tooltip);
+    var hideTimer: ReturnType<typeof setTimeout> | null = null;
+
+    editor.addEventListener('mouseover', function(e: MouseEvent){
+      var a = (e.target as HTMLElement) && (e.target as HTMLElement).closest && (e.target as HTMLElement).closest('a') as HTMLAnchorElement | null;
+      if(!a || !editor.contains(a)){ hide(); return; }
+      clearTimeout(hideTimer!);
+      var href = a.getAttribute('href') || '';
+      tooltip.textContent = href;
+      position(e);
+      tooltip.classList.add('show');
+    });
+
+    editor.addEventListener('mousemove', function(e: MouseEvent){
+      if(!tooltip.classList.contains('show')) return;
+      position(e);
+    });
+
+    editor.addEventListener('mouseout', function(e: MouseEvent){
+      var a = (e.target as HTMLElement) && (e.target as HTMLElement).closest && (e.target as HTMLElement).closest('a');
+      if(!a) return;
+      hideTimer = setTimeout(hide, 200);
+    });
+
+    function position(e: MouseEvent): void {
+      var x = e.clientX + 12;
+      var y = e.clientY + 12;
+      if(x + 310 > window.innerWidth) x = window.innerWidth - 310;
+      if(y + 30 > window.innerHeight) y = e.clientY - 30;
+      tooltip.style.left = x + 'px';
+      tooltip.style.top = y + 'px';
+    }
+
+    function hide(): void {
+      tooltip.classList.remove('show');
+    }
+  }
+};
+
+export default linkTooltip;

package/src/plugins/list.ts

@@ -0,0 +1,141 @@
+import type { Plugin, PluginContext } from '../types';
+
+var CLS_RE = /\bte-list-\S+/g;
+
+var OL_STYLES = [
+  { val: 'decimal',     label: '1.',  cls: '' },
+  { val: 'upper-alpha', label: 'A.',  cls: 'te-list-upper-alpha' },
+  { val: 'lower-alpha', label: 'a.',  cls: 'te-list-lower-alpha' },
+  { val: 'upper-roman', label: 'I.',  cls: 'te-list-upper-roman' },
+  { val: 'lower-roman', label: 'i.',  cls: 'te-list-lower-roman' }
+];
+
+var UL_STYLES = [
+  { val: 'disc',   label: '•', cls: '' },
+  { val: 'circle', label: '○', cls: 'te-list-circle' },
+  { val: 'square', label: '■', cls: 'te-list-square' }
+];
+
+function setListStyle(list: HTMLElement | null, val: string, cls: string){
+  if(!list) return;
+  list.className = (list.className || '').replace(CLS_RE, '').trim();
+  if(cls) list.classList.add(cls);
+  list.style.listStyleType = val || '';
+}
+
+function findAncestorList(node: Node | null): HTMLElement | null {
+  while(node && (node as Element).nodeType === 1){
+    if((node as Element).tagName === 'OL' || (node as Element).tagName === 'UL') return node as HTMLElement;
+    node = (node as Element).parentElement;
+  }
+  return null;
+}
+
+function buildOptions(styles: { val: string; label: string; cls: string }[]){
+  var html = '<option value="">—</option>';
+  for(var i = 0; i < styles.length; i++){
+    html += '<option value="' + styles[i].val + '">' + styles[i].label + '</option>';
+  }
+  return html;
+}
+
+function handleSelect(ctx: PluginContext, select: HTMLSelectElement, tag: string, styles: { val: string; label: string; cls: string }[]){
+  var val = select.value;
+  select.value = '';
+
+  var sel = window.getSelection();
+  if(!sel || !sel.anchorNode) return;
+  var node: Node | null = sel.anchorNode;
+  if(node.nodeType === 3) node = node.parentNode;
+
+  var list = findAncestorList(node);
+  var execCmd = tag === 'OL' ? 'insertOrderedList' : 'insertUnorderedList';
+
+  if(!val){
+    if(list && list.tagName === tag){
+      document.execCommand(execCmd, false, undefined);
+    }
+    ctx.editor.focus();
+    return;
+  }
+
+  var matched: { val: string; label: string; cls: string } | null = null;
+  for(var i = 0; i < styles.length; i++){
+    if(styles[i].val === val){ matched = styles[i]; break; }
+  }
+  if(!matched) return;
+
+  if(list){
+    if(list.tagName === tag){
+      setListStyle(list, val, matched.cls);
+    } else {
+      document.execCommand(execCmd, false, undefined);
+      var afterNode: Node | null = sel.focusNode;
+      if(afterNode && afterNode.nodeType === 3) afterNode = afterNode.parentNode;
+      var newList = findAncestorList(afterNode);
+      if(newList && newList.tagName === tag) setListStyle(newList, val, matched.cls);
+    }
+  } else {
+    document.execCommand(execCmd, false, undefined);
+    var afterNode: Node | null = sel.focusNode;
+    if(afterNode && afterNode.nodeType === 3) afterNode = afterNode.parentNode;
+    var newList = findAncestorList(afterNode);
+    if(newList) setListStyle(newList, val, matched.cls);
+  }
+  ctx.editor.focus();
+}
+
+const list: Plugin = {
+  name: 'list',
+  order: 25,
+  css: '' +
+    '.te-list-select { width: auto; }' +
+    '.te-editor ol.te-list-upper-alpha { list-style-type: upper-alpha; }' +
+    '.te-editor ol.te-list-lower-alpha { list-style-type: lower-alpha; }' +
+    '.te-editor ol.te-list-upper-roman { list-style-type: upper-roman; }' +
+    '.te-editor ol.te-list-lower-roman { list-style-type: lower-roman; }' +
+    '.te-editor ul.te-list-circle { list-style-type: circle; }' +
+    '.te-editor ul.te-list-square { list-style-type: square; }',
+  toolbarHTML: '' +
+    '<select class="te-list-ol form-select form-select-sm te-list-select" title="Ordered list style">' +
+      buildOptions(OL_STYLES) +
+    '</select>' +
+    '<select class="te-list-ul form-select form-select-sm te-list-select" title="Unordered list style">' +
+      buildOptions(UL_STYLES) +
+    '</select>',
+  init(ctx: PluginContext): void {
+    if(ctx.features.list === false) return;
+
+    var olSel = ctx.wrapper.querySelector('.te-list-ol') as HTMLSelectElement | null;
+    var ulSel = ctx.wrapper.querySelector('.te-list-ul') as HTMLSelectElement | null;
+
+    if(olSel){
+      olSel.addEventListener('change', function(){
+        handleSelect(ctx, olSel!, 'OL', OL_STYLES);
+      });
+    }
+
+    if(ulSel){
+      ulSel.addEventListener('change', function(){
+        handleSelect(ctx, ulSel!, 'UL', UL_STYLES);
+      });
+    }
+
+    ctx.editor.addEventListener('keydown', function(e: KeyboardEvent){
+      if(e.key === 'Tab'){
+        var sel = window.getSelection();
+        if(!sel || !sel.anchorNode) return;
+        var node: Node | null = sel.anchorNode;
+        if(node.nodeType === 3) node = node.parentNode;
+        var list = findAncestorList(node);
+        if(list){
+          e.preventDefault();
+          document.execCommand(e.shiftKey ? 'outdent' : 'indent', false, undefined);
+          ctx.editor.focus();
+        }
+      }
+    });
+  }
+};
+
+export default list;

package/src/plugins/markdown.ts

@@ -0,0 +1,61 @@
+import type { Plugin, PluginContext } from '../types';
+
+var RULES: Array<{ re: RegExp; cmd: string; val: string | null }> = [
+  { re: /^#{6}\s$/, cmd: 'formatBlock', val: 'h6' },
+  { re: /^#{5}\s$/, cmd: 'formatBlock', val: 'h5' },
+  { re: /^#{4}\s$/, cmd: 'formatBlock', val: 'h4' },
+  { re: /^#{3}\s$/, cmd: 'formatBlock', val: 'h3' },
+  { re: /^#{2}\s$/, cmd: 'formatBlock', val: 'h2' },
+  { re: /^#{1}\s$/, cmd: 'formatBlock', val: 'h1' },
+  { re: /^>\s$/,   cmd: 'formatBlock', val: 'blockquote' },
+  { re: /^[-*]\s$/, cmd: 'insertUnorderedList', val: null },
+  { re: /^1[.)]\s$/, cmd: 'insertOrderedList', val: null },
+];
+
+const markdown: Plugin = {
+  name: 'markdown',
+  order: 5,
+  init(ctx: PluginContext): void {
+    if(!ctx.features.markdown) return;
+
+    ctx.editor.addEventListener('keydown', function(e: KeyboardEvent){
+      if(e.key !== ' ' && e.key !== 'Enter') return;
+
+      var sel = window.getSelection();
+      if(!sel || sel.rangeCount === 0 || !sel.isCollapsed) return;
+      var node = sel.anchorNode;
+      if(!node || node.nodeType !== 3) return;
+      var text = node.textContent || '';
+
+      for(var i = 0; i < RULES.length; i++){
+        var rule = RULES[i];
+        if(!rule.re.test(text)) continue;
+
+        e.preventDefault();
+
+        if(e.key === 'Enter'){
+          node.textContent = text.slice(0, -1);
+          setTimeout(function(){
+            document.execCommand(rule.cmd, false, rule.val || undefined);
+          }, 0);
+          return;
+        }
+
+        node.textContent = '';
+        document.execCommand(rule.cmd, false, rule.val || undefined);
+        ctx.editor.focus();
+        return;
+      }
+
+      if(e.key === 'Enter' && text.trim() === ''){
+        var parent = node.parentNode as HTMLElement | null;
+        if(parent && (parent.tagName === 'BLOCKQUOTE' || parent.tagName === 'PRE')){
+          e.preventDefault();
+          document.execCommand('formatBlock', false, 'p');
+        }
+      }
+    });
+  }
+};
+
+export default markdown;

package/src/plugins/mediaEmbed.ts

@@ -0,0 +1,44 @@
+import type { Plugin, PluginContext } from '../types';
+import * as H from '../core/helpers';
+
+var EMBED_PROVIDERS: { match: RegExp; embed: (id: string) => string }[] = [
+  {
+    match: /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/,
+    embed: function(id){ return '<iframe src="https://www.youtube.com/embed/' + id + '" style="max-width:100%;border:0;aspect-ratio:16/9;" allowfullscreen></iframe>'; }
+  },
+  {
+    match: /(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(\d+)/,
+    embed: function(id){ return '<iframe src="https://player.vimeo.com/video/' + id + '" style="max-width:100%;border:0;aspect-ratio:16/9;" allowfullscreen></iframe>'; }
+  }
+];
+
+const mediaEmbed: Plugin = {
+  name: 'mediaEmbed',
+  order: 2,
+  init(ctx: PluginContext): void {
+    if(ctx.features.mediaEmbed === 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();
+
+      for(var i = 0; i < EMBED_PROVIDERS.length; i++){
+        var m = text.match(EMBED_PROVIDERS[i].match);
+        if(m && m[1]){
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          var html = EMBED_PROVIDERS[i].embed(m[1]);
+          document.execCommand('insertHTML', false, html);
+          setTimeout(function(){
+            try { H.normalizeParagraphs(editor); H.ensureInitialParagraph(editor); } catch(_){ }
+          }, 0);
+          return;
+        }
+      }
+    }, true);
+  }
+};
+
+export default mediaEmbed;