|
| 1 | +'use client' |
| 2 | + |
| 3 | +import { useEffect, useRef } from 'react' |
| 4 | +import { useToast } from '@sim/emcn' |
| 5 | +import { assessTextPaste, formatPasteLimit, PASTE_LIMITS } from '@sim/utils/paste' |
| 6 | + |
| 7 | +const EDITABLE_TARGET_SELECTOR = |
| 8 | + 'input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="hidden"]), textarea, [contenteditable]:not([contenteditable="false"]), .monaco-editor, .xterm' |
| 9 | + |
| 10 | +function finitePositiveAttribute(element: Element | null, name: string): number | undefined { |
| 11 | + const raw = element?.getAttribute(name) |
| 12 | + if (!raw) return undefined |
| 13 | + const value = Number(raw) |
| 14 | + return Number.isFinite(value) && value > 0 ? value : undefined |
| 15 | +} |
| 16 | + |
| 17 | +function contentEditableSelection(element: HTMLElement): { |
| 18 | + currentText: string |
| 19 | + selectionStart: number |
| 20 | + selectionEnd: number |
| 21 | +} { |
| 22 | + const currentText = element.textContent ?? '' |
| 23 | + const selection = document.getSelection() |
| 24 | + if (!selection || selection.rangeCount === 0) { |
| 25 | + return { currentText, selectionStart: currentText.length, selectionEnd: currentText.length } |
| 26 | + } |
| 27 | + |
| 28 | + const range = selection.getRangeAt(0) |
| 29 | + if (!element.contains(range.startContainer) || !element.contains(range.endContainer)) { |
| 30 | + return { currentText, selectionStart: currentText.length, selectionEnd: currentText.length } |
| 31 | + } |
| 32 | + |
| 33 | + const before = document.createRange() |
| 34 | + before.selectNodeContents(element) |
| 35 | + before.setEnd(range.startContainer, range.startOffset) |
| 36 | + const selectionStart = before.toString().length |
| 37 | + return { |
| 38 | + currentText, |
| 39 | + selectionStart, |
| 40 | + selectionEnd: selectionStart + range.toString().length, |
| 41 | + } |
| 42 | +} |
| 43 | + |
| 44 | +/** |
| 45 | + * Last-resort admission for every editable workspace surface. Specialized editors publish a larger |
| 46 | + * or smaller payload ceiling on an ancestor with `data-paste-max-bytes`; controls without one inherit |
| 47 | + * the Socket.IO-sized default. The capture listener runs before React, ProseMirror, Monaco, and xterm |
| 48 | + * can parse or render the clipboard value. |
| 49 | + */ |
| 50 | +export function PasteAdmissionGuard() { |
| 51 | + const { toast: notify } = useToast() |
| 52 | + const notifyRef = useRef(notify) |
| 53 | + notifyRef.current = notify |
| 54 | + |
| 55 | + useEffect(() => { |
| 56 | + const handlePaste = (event: ClipboardEvent) => { |
| 57 | + if (!(event.target instanceof Element) || !event.target.closest(EDITABLE_TARGET_SELECTOR)) { |
| 58 | + return |
| 59 | + } |
| 60 | + |
| 61 | + const text = event.clipboardData?.getData('text/plain') ?? '' |
| 62 | + if (!text) return |
| 63 | + |
| 64 | + const policyElement = event.target.closest('[data-paste-max-bytes]') |
| 65 | + const maxPastedBytes = |
| 66 | + finitePositiveAttribute(policyElement, 'data-paste-max-bytes') ?? PASTE_LIMITS.DEFAULT_BYTES |
| 67 | + const maxPastedCharacters = finitePositiveAttribute( |
| 68 | + policyElement, |
| 69 | + 'data-paste-max-characters' |
| 70 | + ) |
| 71 | + const nativeControl = |
| 72 | + event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement |
| 73 | + const editableElement = event.target.closest<HTMLElement>( |
| 74 | + '[contenteditable]:not([contenteditable="false"])' |
| 75 | + ) |
| 76 | + const projectedValue = nativeControl |
| 77 | + ? { |
| 78 | + currentText: event.target.value, |
| 79 | + selectionStart: event.target.selectionStart ?? event.target.value.length, |
| 80 | + selectionEnd: event.target.selectionEnd ?? event.target.value.length, |
| 81 | + } |
| 82 | + : editableElement |
| 83 | + ? contentEditableSelection(editableElement) |
| 84 | + : null |
| 85 | + const admission = assessTextPaste({ |
| 86 | + pastedText: text, |
| 87 | + maxPastedBytes, |
| 88 | + maxPastedCharacters, |
| 89 | + ...(projectedValue |
| 90 | + ? { |
| 91 | + ...projectedValue, |
| 92 | + maxResultBytes: maxPastedBytes, |
| 93 | + maxResultCharacters: maxPastedCharacters, |
| 94 | + } |
| 95 | + : {}), |
| 96 | + }) |
| 97 | + if (admission.accepted) return |
| 98 | + |
| 99 | + event.preventDefault() |
| 100 | + event.stopImmediatePropagation() |
| 101 | + const limit = |
| 102 | + admission.reason === 'pasted-characters' |
| 103 | + ? `${admission.limit.toLocaleString()} characters` |
| 104 | + : formatPasteLimit(admission.limit) |
| 105 | + notifyRef.current.warning('Paste is too large for this editor', { |
| 106 | + description: `The clipboard content was left unchanged. This editor supports up to ${limit}.`, |
| 107 | + }) |
| 108 | + } |
| 109 | + |
| 110 | + document.addEventListener('paste', handlePaste, true) |
| 111 | + return () => document.removeEventListener('paste', handlePaste, true) |
| 112 | + }, []) |
| 113 | + |
| 114 | + return null |
| 115 | +} |
0 commit comments