@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/src/components/rich-text-editor/engine.ts

@@ -0,0 +1,673 @@
+import { gsap, EASE, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import { press, shake } from '../../motion/micro';
+
+/*
+ * Rich text editor: a writing area with a toolbar for bold, italic,
+ * underline, strikethrough, headings, lists, quotes, code and links. Buttons
+ * press with a bounce, and the formats under the caret light up as it moves
+ * (their pill grows in). Shortcuts: Ctrl/⌘+B, I, U, K, Shift+X (strikethrough),
+ * Ctrl/⌘+Z and Y. Markdown as you type: "# " and "## " make headings, "- " or
+ * "* " a list, "1. " a numbered one, "> " a quote, **bold** and `code` inline.
+ * Pasted text keeps only safe formatting (no styles, classes or scripts). The
+ * link editor grows out of its button; the counter turns red and the area
+ * shakes once when it passes maxLength. A hidden field carries the HTML for
+ * forms; the placeholder fades.
+ */
+
+export type RichCommand = 'bold' | 'italic' | 'underline' | 'strike' | 'h2' | 'h3' | 'ul' | 'ol' | 'quote' | 'code' | 'link' | 'clear' | 'undo' | 'redo';
+
+export interface RichTextEditorOptions {
+  /** The first content, as HTML (cleaned like a paste). */
+  value?: string;
+  placeholder?: string;
+  /** The buttons, in order; '|' separates groups (default: all). */
+  toolbar?: Array<RichCommand | '|'>;
+  /** Characters before the counter turns red (the text can go on). */
+  maxLength?: number;
+  /** 'words' (default), 'characters', or false. */
+  counter?: 'words' | 'characters' | false;
+  /** A hidden field with this name carries the HTML. */
+  name?: string;
+  /** Accessible name of the writing area (default 'Editor de texto'). */
+  label?: string;
+  readOnly?: boolean;
+  /** Markdown shortcuts while typing (default true). */
+  markdown?: boolean;
+  onChange?: (html: string, text: string) => void;
+}
+
+export interface RichTextEditorInstance extends Instance {
+  setValue(html: string): void;
+  focus(): void;
+  exec(command: RichCommand, value?: string): void;
+  readonly value: string;
+  readonly text: string;
+  readonly element: HTMLElement;
+}
+
+const SVG = (paths: string) =>
+  `<svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${paths}</svg>`;
+const BUTTONS: Record<RichCommand, { label: string; keys?: string; icon: string; toggle?: boolean }> = {
+  bold: { label: 'Negrita', keys: 'Ctrl+B', toggle: true, icon: SVG('<path d="M7 5h6a3.5 3.5 0 0 1 0 7H7zM7 12h7a3.5 3.5 0 0 1 0 7H7z"/>') },
+  italic: { label: 'Cursiva', keys: 'Ctrl+I', toggle: true, icon: SVG('<path d="M14 5h-4M14 19h-4M14 5l-4 14"/>') },
+  underline: { label: 'Subrayado', keys: 'Ctrl+U', toggle: true, icon: SVG('<path d="M7 4v7a5 5 0 0 0 10 0V4M5 20h14"/>') },
+  strike: { label: 'Tachado', keys: 'Ctrl+Mayús+X', toggle: true, icon: SVG('<path d="M5 12h14M16 6.5A4 4 0 0 0 12.5 5h-1A3.5 3.5 0 0 0 8 8.5c0 1.5 1 2.6 2.6 3.1M8 17.5A4 4 0 0 0 11.5 19h1a3.5 3.5 0 0 0 3.5-3.5"/>') },
+  h2: { label: 'Título', toggle: true, icon: SVG('<path d="M4 6v12M12 6v12M4 12h8M16 10l3-2v10"/>') },
+  h3: { label: 'Subtítulo', toggle: true, icon: SVG('<path d="M4 6v12M12 6v12M4 12h8M16 8.5a2.5 2.5 0 1 1 2.5 3.5 2.5 2.5 0 1 1-2.5 3.5"/>') },
+  ul: { label: 'Lista', toggle: true, icon: SVG('<path d="M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01"/>') },
+  ol: { label: 'Lista numerada', toggle: true, icon: SVG('<path d="M10 6h10M10 12h10M10 18h10M4 5l1.5-1v5M3.5 13.5a1.5 1.5 0 0 1 3 .5c0 1-3 2-3 3h3"/>') },
+  quote: { label: 'Cita', toggle: true, icon: SVG('<path d="M7 7h4v6a4 4 0 0 1-4 4M15 7h4v6a4 4 0 0 1-4 4"/>') },
+  code: { label: 'Código', toggle: true, icon: SVG('<path d="M9 8l-4 4 4 4M15 8l4 4-4 4"/>') },
+  link: { label: 'Enlace', keys: 'Ctrl+K', toggle: true, icon: SVG('<path d="M10 14a4 4 0 0 0 5.66 0l3-3a4 4 0 0 0-5.66-5.66l-1 1M14 10a4 4 0 0 0-5.66 0l-3 3a4 4 0 0 0 5.66 5.66l1-1"/>') },
+  clear: { label: 'Quitar formato', icon: SVG('<path d="M6 5h12M12 5l-3 14M15.5 15.5l4 4M19.5 15.5l-4 4"/>') },
+  undo: { label: 'Deshacer', keys: 'Ctrl+Z', icon: SVG('<path d="M9 7L4 12l5 5M4 12h11a5 5 0 0 1 0 10h-2"/>') },
+  redo: { label: 'Rehacer', keys: 'Ctrl+Y', icon: SVG('<path d="M15 7l5 5-5 5M20 12H9a5 5 0 0 0 0 10h2"/>') },
+};
+const DEFAULT_TOOLBAR: Array<RichCommand | '|'> = ['bold', 'italic', 'underline', 'strike', '|', 'h2', 'h3', '|', 'ul', 'ol', 'quote', 'code', '|', 'link', 'clear', '|', 'undo', 'redo'];
+const ZWSP = '​';
+
+// ── Cleaning HTML ──────────────────────────────────────────────────────────
+const KEEP: Record<string, string> = {
+  p: 'p', div: 'p', br: 'br', strong: 'strong', b: 'strong', em: 'em', i: 'em', u: 'u', s: 's', strike: 's', del: 's',
+  h1: 'h2', h2: 'h2', h3: 'h3', h4: 'h3', h5: 'h3', h6: 'h3', ul: 'ul', ol: 'ol', li: 'li', blockquote: 'blockquote', code: 'code', pre: 'pre', a: 'a',
+};
+const DROP = new Set(['script', 'style', 'meta', 'link', 'iframe', 'object', 'embed', 'template', 'noscript', 'svg', 'math', 'head', 'title', 'form', 'input', 'button', 'select', 'textarea']);
+const SAFE_URL = /^(https?:|mailto:|tel:|#|\/|\.{0,2}\/)/i;
+
+/** HTML with only safe formatting: known tags (renamed to their kind), links with safe addresses, no attributes else. */
+export function sanitizeHtml(html: string): string {
+  if (typeof DOMParser === 'undefined') return '';
+  const source = new DOMParser().parseFromString(`<body>${html}</body>`, 'text/html').body;
+  const out = document.createElement('div');
+  const copy = (from: Node, into: Node) => {
+    for (const node of from.childNodes) {
+      if (node.nodeType === Node.TEXT_NODE) {
+        into.appendChild(document.createTextNode((node.textContent ?? '').replace(new RegExp(ZWSP, 'g'), '')));
+        continue;
+      }
+      if (node.nodeType !== Node.ELEMENT_NODE) continue;
+      const element = node as Element;
+      const tag = element.tagName.toLowerCase();
+      if (DROP.has(tag)) continue;
+      const kind = KEEP[tag];
+      // Unknown wrappers (span, font, section…) give their content.
+      if (!kind) {
+        copy(element, into);
+        continue;
+      }
+      const made = document.createElement(kind);
+      if (kind === 'a') {
+        const href = element.getAttribute('href')?.trim() ?? '';
+        if (!SAFE_URL.test(href)) {
+          copy(element, into);
+          continue;
+        }
+        made.setAttribute('href', href);
+        if (/^https?:/i.test(href)) {
+          made.setAttribute('target', '_blank');
+          made.setAttribute('rel', 'noopener noreferrer');
+        }
+      }
+      copy(element, made);
+      into.appendChild(made);
+    }
+  };
+  copy(source, out);
+  return out.innerHTML;
+}
+
+const escapeText = (text: string) => {
+  const holder = document.createElement('div');
+  holder.textContent = text;
+  return holder.innerHTML;
+};
+/** Plain text as paragraphs (blank lines) and line breaks. */
+const textToHtml = (text: string) =>
+  text
+    .replace(/\r\n?/g, '\n')
+    .split(/\n{2,}/)
+    .map((paragraph) => `<p>${escapeText(paragraph).replace(/\n/g, '<br>')}</p>`)
+    .join('');
+
+export function createRichTextEditor(root: HTMLElement | null, options: RichTextEditorOptions = {}): RichTextEditorInstance {
+  if (!root) return inert({ setValue() {}, focus() {}, exec() {}, value: '', text: '', element: null as unknown as HTMLElement });
+  registerMotion();
+  const scope = createScope();
+  const markdown = options.markdown !== false;
+  const counterMode = options.counter === false ? null : (options.counter ?? (options.maxLength ? 'characters' : 'words'));
+  const effects = new Set<gsap.core.Animation>();
+  const keep = (animation: gsap.core.Animation | null) => {
+    if (!animation) return;
+    effects.add(animation);
+    // Finished ones leave as new ones arrive: the animation's own onComplete stays untouched.
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+  // What was written inside the root is the first content (unless `value` is given).
+  const authored = root.innerHTML;
+  const holder = document.createElement('div');
+  holder.hidden = true;
+  holder.append(...root.childNodes);
+
+  // ── The parts ────────────────────────────────────────────────────────────
+  const toolbar = document.createElement('div');
+  toolbar.dataset.mkRteToolbar = '';
+  toolbar.setAttribute('role', 'toolbar');
+  toolbar.setAttribute('aria-label', 'Formato');
+  const buttons = new Map<RichCommand, HTMLButtonElement>();
+  let group = document.createElement('div');
+  group.dataset.mkRteGroup = '';
+  toolbar.append(group);
+  for (const entry of options.toolbar ?? DEFAULT_TOOLBAR) {
+    if (entry === '|') {
+      group = document.createElement('div');
+      group.dataset.mkRteGroup = '';
+      toolbar.append(group);
+      continue;
+    }
+    const spec = BUTTONS[entry];
+    if (!spec) continue;
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.dataset.command = entry;
+    const label = spec.keys ? `${spec.label} (${spec.keys})` : spec.label;
+    button.setAttribute('aria-label', label);
+    button.title = label;
+    if (spec.toggle) button.setAttribute('aria-pressed', 'false');
+    button.innerHTML = spec.icon;
+    button.tabIndex = buttons.size ? -1 : 0;
+    group.append(button);
+    buttons.set(entry, button);
+  }
+  const content = document.createElement('div');
+  content.dataset.mkRteContent = '';
+  content.contentEditable = options.readOnly ? 'false' : 'true';
+  content.setAttribute('role', 'textbox');
+  content.setAttribute('aria-multiline', 'true');
+  content.setAttribute('aria-label', options.label ?? 'Editor de texto');
+  content.dataset.placeholder = options.placeholder ?? 'Escribe algo…';
+  content.spellcheck = true;
+  if (options.readOnly) content.setAttribute('aria-readonly', 'true');
+  const foot = document.createElement('div');
+  foot.dataset.mkRteFoot = '';
+  const counter = document.createElement('span');
+  counter.dataset.mkRteCounter = '';
+  counter.setAttribute('aria-live', 'polite');
+  foot.append(counter);
+  foot.hidden = !counterMode;
+  let hidden: HTMLInputElement | null = null;
+  if (options.name) {
+    hidden = document.createElement('input');
+    hidden.type = 'hidden';
+    hidden.name = options.name;
+    foot.append(hidden);
+  }
+  // The link editor.
+  const linkBox = document.createElement('div');
+  linkBox.dataset.mkRteLink = '';
+  linkBox.hidden = true;
+  linkBox.setAttribute('role', 'group');
+  linkBox.setAttribute('aria-label', 'Enlace');
+  const linkInput = document.createElement('input');
+  linkInput.type = 'url';
+  linkInput.placeholder = 'https://…';
+  linkInput.setAttribute('aria-label', 'Dirección del enlace');
+  const linkApply = document.createElement('button');
+  linkApply.type = 'button';
+  linkApply.dataset.mkRteLinkApply = '';
+  linkApply.textContent = 'Aplicar';
+  const linkRemove = document.createElement('button');
+  linkRemove.type = 'button';
+  linkRemove.dataset.mkRteLinkRemove = '';
+  linkRemove.textContent = 'Quitar';
+  linkBox.append(linkInput, linkApply, linkRemove);
+  const status = document.createElement('span');
+  status.className = 'mk-sr-only';
+  status.setAttribute('role', 'status');
+  if (!options.readOnly) root.append(toolbar);
+  root.append(content, linkBox, foot, status);
+  scope.attr(root, 'data-mk-ready', '');
+  if (options.readOnly) scope.attr(root, 'data-mk-readonly', '');
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
+    for (const part of [toolbar, content, linkBox, foot, status]) part.remove();
+    root.append(...holder.childNodes);
+  });
+
+  const run = (name: string, value?: string) => {
+    if (typeof document.execCommand !== 'function') return false;
+    try {
+      return document.execCommand(name, false, value);
+    } catch {
+      return false;
+    }
+  };
+  try {
+    document.execCommand?.('defaultParagraphSeparator', false, 'p');
+  } catch {
+    // Older engines: their default separator stands.
+  }
+
+  // ── Value ────────────────────────────────────────────────────────────────
+  const cleanValue = () => sanitizeHtml(content.innerHTML).replace(/<p><br><\/p>$/, '').replace(/^<p><\/p>$/, '');
+  const textValue = () => (content.innerText ?? content.textContent ?? '').replace(new RegExp(ZWSP, 'g'), '').replace(/\n{3,}/g, '\n\n').trim();
+  const BLOCKS = new Set(['P', 'H2', 'H3', 'UL', 'OL', 'BLOCKQUOTE', 'PRE']);
+  const setContent = (html: string) => {
+    const holder = document.createElement('div');
+    holder.innerHTML = sanitizeHtml(html);
+    // Blocks stay; runs of loose text and inline formatting at the top go in paragraphs; blank space between blocks goes.
+    const out: Node[] = [];
+    let paragraph: HTMLParagraphElement | null = null;
+    for (const node of [...holder.childNodes]) {
+      if (node.nodeType === Node.ELEMENT_NODE && BLOCKS.has((node as Element).tagName)) {
+        paragraph = null;
+        out.push(node);
+        continue;
+      }
+      if (node.nodeType === Node.TEXT_NODE && !node.textContent?.trim() && !paragraph) continue;
+      if (!paragraph) {
+        paragraph = document.createElement('p');
+        out.push(paragraph);
+      }
+      paragraph.append(node);
+    }
+    content.replaceChildren(...out);
+    if (!content.firstChild) content.innerHTML = '<p><br></p>';
+  };
+  setContent(options.value ?? authored);
+
+  let over = false;
+  let lastValue = '';
+  const paint = (notify: boolean) => {
+    const text = textValue();
+    content.toggleAttribute('data-empty', !text && !content.querySelector('li, img'));
+    if (counterMode) {
+      const characters = [...text].length;
+      const words = text ? text.split(/\s+/).filter(Boolean).length : 0;
+      if (options.maxLength) {
+        counter.textContent = `${characters} / ${options.maxLength}`;
+        const now = characters > options.maxLength;
+        if (now && !over) {
+          keep(shake(content, 3));
+          status.textContent = `Pasaste el límite de ${options.maxLength} caracteres`;
+        }
+        over = now;
+        root.toggleAttribute('data-mk-over', now);
+        content.setAttribute('aria-invalid', String(now));
+      } else counter.textContent = counterMode === 'words' ? `${words} ${words === 1 ? 'palabra' : 'palabras'}` : `${characters} ${characters === 1 ? 'carácter' : 'caracteres'}`;
+    }
+    const html = cleanValue();
+    if (hidden) hidden.value = html;
+    if (notify && html !== lastValue) {
+      lastValue = html;
+      options.onChange?.(html, text);
+      root.dispatchEvent(new CustomEvent('mk:change', { bubbles: true, detail: { html, text } }));
+    } else lastValue = html;
+  };
+  paint(false);
+
+  // ── Where the caret is ───────────────────────────────────────────────────
+  const selectionInside = () => {
+    const selection = window.getSelection();
+    if (!selection || !selection.rangeCount) return null;
+    const range = selection.getRangeAt(0);
+    return content.contains(range.commonAncestorContainer) ? range : null;
+  };
+  const closest = (node: Node | null, selector: string) => {
+    const element = node?.nodeType === Node.ELEMENT_NODE ? (node as Element) : (node?.parentElement ?? null);
+    const found = element?.closest(selector);
+    return found && content.contains(found) ? (found as HTMLElement) : null;
+  };
+  const block = (node: Node | null) => closest(node, 'p, h2, h3, li, blockquote, pre');
+  const states = (): Partial<Record<RichCommand, boolean>> => {
+    const range = selectionInside();
+    if (!range) return {};
+    const node = range.startContainer;
+    const query = (name: string) => {
+      try {
+        return Boolean(document.queryCommandState?.(name));
+      } catch {
+        return false;
+      }
+    };
+    return {
+      bold: query('bold') || Boolean(closest(node, 'strong, b')),
+      italic: query('italic') || Boolean(closest(node, 'em, i')),
+      underline: query('underline') || Boolean(closest(node, 'u')),
+      strike: query('strikeThrough') || Boolean(closest(node, 's, strike, del')),
+      h2: Boolean(closest(node, 'h2')),
+      h3: Boolean(closest(node, 'h3')),
+      ul: Boolean(closest(node, 'ul')),
+      ol: Boolean(closest(node, 'ol')),
+      quote: Boolean(closest(node, 'blockquote')),
+      code: Boolean(closest(node, 'code')),
+      link: Boolean(closest(node, 'a')),
+    };
+  };
+  const paintToolbar = () => {
+    const now = states();
+    for (const [command, button] of buttons) {
+      if (!button.hasAttribute('aria-pressed')) continue;
+      button.setAttribute('aria-pressed', String(Boolean(now[command])));
+    }
+  };
+  scope.on(document, 'selectionchange', () => {
+    if (selectionInside()) paintToolbar();
+  });
+
+  // ── Commands ─────────────────────────────────────────────────────────────
+  const toggleBlock = (tag: 'h2' | 'h3' | 'blockquote') => {
+    const range = selectionInside();
+    const inside = range ? closest(range.startContainer, tag) : null;
+    run('formatBlock', inside ? '<p>' : `<${tag}>`);
+  };
+  const toggleCode = () => {
+    const range = selectionInside();
+    if (!range) return;
+    const code = closest(range.startContainer, 'code');
+    if (code) {
+      // Out of code: its text stays, plain.
+      code.replaceWith(...code.childNodes);
+      return;
+    }
+    if (range.collapsed) return;
+    const element = document.createElement('code');
+    element.textContent = range.toString();
+    range.deleteContents();
+    range.insertNode(element);
+    const after = document.createTextNode(ZWSP);
+    element.after(after);
+    placeCaret(after, 1);
+  };
+  const placeCaret = (node: Node, offset: number) => {
+    const selection = window.getSelection();
+    if (!selection) return;
+    const range = document.createRange();
+    range.setStart(node, offset);
+    range.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  };
+
+  let savedRange: Range | null = null;
+  const openLink = () => {
+    const range = selectionInside();
+    savedRange = range ? range.cloneRange() : null;
+    const current = range ? closest(range.startContainer, 'a') : null;
+    linkInput.value = current?.getAttribute('href') ?? '';
+    linkRemove.hidden = !current;
+    linkBox.hidden = false;
+    // Under its button, inside the editor.
+    const button = buttons.get('link');
+    const rootBox = root.getBoundingClientRect();
+    const anchor = button?.getBoundingClientRect();
+    if (anchor) {
+      linkBox.style.top = `${anchor.bottom - rootBox.top + 6}px`;
+      linkBox.style.left = `${Math.max(0, Math.min(anchor.left - rootBox.left, rootBox.width - linkBox.offsetWidth))}px`;
+    }
+    if (!reduced()) keep(gsap.fromTo(linkBox, { opacity: 0, scale: 0.92, y: -6, filter: 'blur(6px)' }, { opacity: 1, scale: 1, y: 0, filter: 'blur(0px)', duration: 0.28, ease: EASE.pop, transformOrigin: '0% 0%', clearProps: 'opacity,transform,filter' }));
+    linkInput.focus();
+    linkInput.select();
+  };
+  const closeLink = (focusBack = true) => {
+    if (linkBox.hidden) return;
+    const finish = () => {
+      linkBox.hidden = true;
+      gsap.set(linkBox, { clearProps: 'opacity,transform,filter' });
+    };
+    if (reduced()) finish();
+    else keep(gsap.to(linkBox, { opacity: 0, scale: 0.95, duration: 0.16, ease: 'power1.in', onComplete: finish }));
+    if (focusBack) {
+      content.focus({ preventScroll: true });
+      if (savedRange) {
+        const selection = window.getSelection();
+        selection?.removeAllRanges();
+        selection?.addRange(savedRange);
+      }
+    }
+  };
+  const applyLink = () => {
+    const href = linkInput.value.trim();
+    if (href && !SAFE_URL.test(href) && !/^[\w.-]+\.[a-z]{2,}/i.test(href)) {
+      keep(shake(linkInput));
+      status.textContent = 'La dirección no es válida';
+      return;
+    }
+    const url = href && !SAFE_URL.test(href) ? `https://${href}` : href;
+    closeLink();
+    if (!url) return;
+    run('createLink', url);
+    // External links open apart and safely.
+    if (/^https?:/i.test(url)) {
+      for (const anchor of content.querySelectorAll<HTMLAnchorElement>('a[href]')) {
+        if (anchor.getAttribute('href') !== url) continue;
+        anchor.target = '_blank';
+        anchor.rel = 'noopener noreferrer';
+      }
+    }
+    status.textContent = 'Enlace aplicado';
+    paint(true);
+  };
+  const removeLink = () => {
+    closeLink();
+    run('unlink');
+    status.textContent = 'Enlace quitado';
+    paint(true);
+  };
+
+  const exec = (command: RichCommand, value?: string) => {
+    if (options.readOnly) return;
+    if (command !== 'link' && !selectionInside()) content.focus({ preventScroll: true });
+    switch (command) {
+      case 'bold':
+      case 'italic':
+      case 'underline':
+        run(command);
+        break;
+      case 'strike':
+        run('strikeThrough');
+        break;
+      case 'h2':
+      case 'h3':
+        toggleBlock(command);
+        break;
+      case 'quote':
+        toggleBlock('blockquote');
+        break;
+      case 'ul':
+        run('insertUnorderedList');
+        break;
+      case 'ol':
+        run('insertOrderedList');
+        break;
+      case 'code':
+        toggleCode();
+        break;
+      case 'link':
+        if (value !== undefined) {
+          linkInput.value = value;
+          savedRange = selectionInside()?.cloneRange() ?? null;
+          applyLink();
+        } else openLink();
+        return;
+      case 'clear':
+        run('removeFormat');
+        run('formatBlock', '<p>');
+        break;
+      case 'undo':
+      case 'redo':
+        run(command);
+        break;
+    }
+    paintToolbar();
+    paint(true);
+  };
+
+  // ── Toolbar: pointer and keyboard ────────────────────────────────────────
+  // The editor keeps its selection while a button is pressed.
+  scope.on(toolbar, 'mousedown', (event) => {
+    if ((event.target as Element).closest('button')) event.preventDefault();
+  });
+  scope.on(toolbar, 'click', (event) => {
+    const button = (event.target as Element | null)?.closest<HTMLButtonElement>('button[data-command]');
+    if (!button) return;
+    keep(press(button));
+    exec(button.dataset.command as RichCommand);
+  });
+  scope.on(toolbar, 'keydown', (event) => {
+    const key = (event as KeyboardEvent).key;
+    const list = [...buttons.values()];
+    const at = list.indexOf(document.activeElement as HTMLButtonElement);
+    const moves: Record<string, number> = { ArrowRight: at + 1, ArrowLeft: at - 1, Home: 0, End: list.length - 1 };
+    if (!(key in moves) || at < 0) return;
+    event.preventDefault();
+    const next = list[(moves[key]! + list.length) % list.length]!;
+    for (const button of list) button.tabIndex = button === next ? 0 : -1;
+    next.focus();
+  });
+
+  // ── Writing ──────────────────────────────────────────────────────────────
+  scope.on(content, 'keydown', (event) => {
+    const key = event as KeyboardEvent;
+    if (!(key.ctrlKey || key.metaKey) || key.altKey) return;
+    const letter = key.key.toLowerCase();
+    const shortcuts: Record<string, RichCommand> = { b: 'bold', i: 'italic', u: 'underline', k: 'link' };
+    let command: RichCommand | undefined = shortcuts[letter];
+    if (key.shiftKey && letter === 'x') command = 'strike';
+    if (!command || key.shiftKey !== (command === 'strike')) return;
+    key.preventDefault();
+    const button = buttons.get(command);
+    if (button) keep(press(button));
+    exec(command);
+  });
+
+  /** Markdown at the start of a block ("# ", "- ", "1. ", "> ") and inline (**bold**, `code`). */
+  const autoformat = (typed: string) => {
+    const range = selectionInside();
+    if (!range || !range.collapsed) return;
+    const node = range.startContainer;
+    if (typed === ' ') {
+      const current = block(node);
+      if (!current || current.tagName === 'LI' || current.tagName === 'PRE') return;
+      // The text from the start of the block to the caret.
+      const before = document.createRange();
+      before.selectNodeContents(current);
+      before.setEnd(range.startContainer, range.startOffset);
+      const text = before.toString().replace(new RegExp(ZWSP, 'g'), '');
+      const rules: Array<[RegExp, () => void]> = [
+        [/^#\s$/, () => run('formatBlock', '<h2>')],
+        [/^##\s$/, () => run('formatBlock', '<h3>')],
+        [/^[-*]\s$/, () => run('insertUnorderedList')],
+        [/^1[.)]\s$/, () => run('insertOrderedList')],
+        [/^>\s$/, () => run('formatBlock', '<blockquote>')],
+      ];
+      for (const [pattern, apply] of rules) {
+        if (!pattern.test(text)) continue;
+        // The marker goes; the format stays.
+        before.deleteContents();
+        apply();
+        current.normalize();
+        return true;
+      }
+      return;
+    }
+    if ((typed === '*' || typed === '`') && node.nodeType === Node.TEXT_NODE) {
+      const text = (node.textContent ?? '').slice(0, range.startOffset);
+      const match = typed === '*' ? /\*\*([^*]+)\*\*$/.exec(text) : /`([^`]+)`$/.exec(text);
+      if (!match) return;
+      const start = range.startOffset - match[0].length;
+      const span = document.createRange();
+      span.setStart(node, start);
+      span.setEnd(node, range.startOffset);
+      span.deleteContents();
+      const element = document.createElement(typed === '*' ? 'strong' : 'code');
+      element.textContent = match[1]!;
+      span.insertNode(element);
+      // The caret goes after it, outside of it.
+      const after = document.createTextNode(ZWSP);
+      element.after(after);
+      placeCaret(after, 1);
+      // A soft highlight says what just changed.
+      if (!reduced()) {
+        element.setAttribute('data-mk-rte-fresh', '');
+        scope.timeout(() => element.removeAttribute('data-mk-rte-fresh'), 1000);
+      }
+      return true;
+    }
+    return;
+  };
+
+  scope.on(content, 'input', (event) => {
+    const input = event as InputEvent;
+    if (markdown && input.inputType === 'insertText' && input.data && autoformat(input.data.slice(-1))) {
+      const fresh = selectionInside() ? block(selectionInside()!.startContainer) : null;
+      if (fresh && !reduced()) keep(gsap.fromTo(fresh, { opacity: 0.4, filter: 'blur(4px)' }, { opacity: 1, filter: 'blur(0px)', duration: 0.3, ease: 'power1.out', clearProps: 'opacity,filter' }));
+      status.textContent = 'Formato aplicado';
+    }
+    // An emptied area keeps a paragraph to write in.
+    if (!content.firstElementChild) content.innerHTML = '<p><br></p>';
+    paint(true);
+    paintToolbar();
+  });
+
+  scope.on(content, 'paste', (event) => {
+    if (options.readOnly) return;
+    const clipboard = (event as ClipboardEvent).clipboardData;
+    if (!clipboard) return;
+    event.preventDefault();
+    const html = clipboard.getData('text/html');
+    const clean = html ? sanitizeHtml(html) : textToHtml(clipboard.getData('text/plain'));
+    if (!run('insertHTML', clean)) {
+      // No insertHTML: put it in by hand.
+      const range = selectionInside();
+      if (range) {
+        range.deleteContents();
+        const holder = document.createElement('div');
+        holder.innerHTML = clean;
+        const fragment = document.createDocumentFragment();
+        fragment.append(...holder.childNodes);
+        range.insertNode(fragment);
+      }
+    }
+    paint(true);
+  });
+
+  scope.on(linkInput, 'keydown', (event) => {
+    const key = (event as KeyboardEvent).key;
+    if (key === 'Enter') {
+      event.preventDefault();
+      applyLink();
+    } else if (key === 'Escape') {
+      event.preventDefault();
+      closeLink();
+    }
+  });
+  scope.on(linkApply, 'click', applyLink);
+  scope.on(linkRemove, 'click', removeLink);
+  scope.on(document, 'pointerdown', (event) => {
+    if (!linkBox.hidden && !linkBox.contains(event.target as Node) && !buttons.get('link')?.contains(event.target as Node)) closeLink(false);
+  });
+  scope.on(content, 'focus', () => root.setAttribute('data-mk-focused', ''));
+  scope.on(content, 'blur', () => root.removeAttribute('data-mk-focused'));
+
+  return {
+    setValue(html) {
+      if (scope.disposed) return;
+      setContent(html);
+      paint(false);
+    },
+    focus: () => content.focus(),
+    exec,
+    get value() {
+      return cleanValue();
+    },
+    get text() {
+      return textValue();
+    },
+    element: content,
+    destroy: () => scope.dispose(),
+  };
+}