Clipboard 1

by ecmanaut

HTML

<div contenteditable id="editor">Hello world</div>

TypeScript

const editor = document.getElementById('editor');

function cd(event: ClipboardEvent): DataTransfer {
	return event.clipboardData || window.clipboardData;
}

function copy(copyEvent: ClipboardEvent, contentDOM: HTMLElement): void {
    try {
        cd(copyEvent).setData('text/plain', contentDOM.innerHTML);
        cd(copyEvent).setData('text/html', contentDOM.innerHTML.bold());
        copyEvent.preventDefault();
    }
    catch (e) {
    	console.error(e + '');
        const tmp = document.createElement('div');
        tmp.innerHTML = '<span>a</span>' + contentDOM.innerHTML.bold() + '<span>b</span>';
        document.body.appendChild(tmp);
        
        const sel = window.getSelection();
        const rangeBefore = sel.getRangeAt(0);
        
        tmp.setAttribute('contenteditable', 'contenteditable');
        tmp.style.userSelect = 'text';
        tmp.tabIndex = -1;
        tmp.focus();
        
        sel.removeAllRanges();
        const range = document.createRange();
        range.setStart(tmp, 1);
        range.setEnd(tmp, tmp.childNodes.length - 1);


        sel.addRange(range);
        
        setTimeout(() => {
        	document.body.removeChild(tmp);
            sel.removeAllRanges();
            sel.addRange(rangeBefore);
            editor.focus();
        }, 1);
        throw e;
        
    }
}

editor.addEventListener('copy', (copyEvent: ClipboardEvent) => {
    copy(copyEvent, editor);
});