react-contenteditable icon indicating copy to clipboard operation
react-contenteditable copied to clipboard

Paste wont work some times.

Open jack-fdrv opened this issue 2 years ago • 1 comments

Weired bug. Checked on Chrome wihtout extantions and safari.

<ContentEditable
  className='esup_editor_text'
  innerRef={editorRef}
  autoFocus
  onChange={(evt) => {
	  handles.updateContent(evt.currentTarget.innerHTML)
  }}
  onBlur={() => {
	  console.log('blur');
  }}
html={editorData.text || ''} />

Paste event works fine, if i copied text inside ContentEditable and some other html. But i copied it from url adress for example, i wont paste it in. I try to use

onPaste={(evt) => {
	evt.preventDefault();
	const text = evt.clipboardData.getData('text/plain');
	document.execCommand('insertHTML', false, text);
}}

And it start working! But the problem that now if i try to paste text which. have copied inside ContentEditable it paste it twice. It also wont work when i right click, paste...

jack-fdrv avatar Sep 22 '23 01:09 jack-fdrv

const handleChange = (evt) => { const newContent = editorRef.current?.innerHTML || ''; setContent(newContent); if (onChange) { onChange(newContent); } };

const handlePaste = (e) => { e.preventDefault(); const text = e.clipboardData.getData('text/plain'); document.execCommand('insertText', false, text); handleChange(e); };

ghost avatar Apr 03 '25 07:04 ghost