diff --git a/client/modules/IDE/components/Editor/index.jsx b/client/modules/IDE/components/Editor/index.jsx index 404741591..3b81e62b8 100644 --- a/client/modules/IDE/components/Editor/index.jsx +++ b/client/modules/IDE/components/Editor/index.jsx @@ -184,6 +184,41 @@ class Editor extends React.Component { [`${metaKey}-.`]: 'toggleComment' // Note: most adblockers use the shortcut ctrl+. }); + const rtfCopy = (_cm, e) => { + e.preventDefault(); + const plaintext = _cm.doc.getSelection(); + const selectedElementsArr = document.getElementsByClassName( + 'CodeMirror-selectedtext' + ); + let richText = plaintext[0] === '\n' ? '
' : ''; + let plaintextcounter = plaintext[0] === '\n' ? 1 : 0; + for (let i = 0; i < selectedElementsArr.length; i += 1) { + const { + color, + fontWeight, + fontSize, + fontFamily + } = window.getComputedStyle(selectedElementsArr[i]); + const cssToken = `color: ${color}; font-weight: ${fontWeight}; font-size: ${fontSize}; font-family: ${fontFamily}`; + richText += `${selectedElementsArr[i].textContent}`; + plaintextcounter += selectedElementsArr[i].textContent.length; + while ( + plaintextcounter < plaintext.length && + plaintext[plaintextcounter] === '\n' + ) { + richText += '
'; + plaintextcounter += 1; + } + } + + try { + e.clipboardData.setData('text/html', richText); + e.clipboardData.setData('text/plain', plaintext); + } catch (error) { + console.error(error); + } + }; + this.initializeDocuments(this.props.files); this._cm.swapDoc(this._docs[this.props.file.id]); @@ -204,6 +239,12 @@ class Editor extends React.Component { this._cm.on('keyup', this.handleKeyUp); } + this._cm.on('copy', rtfCopy); + this._cm.on('cut', (_em, e) => { + rtfCopy(_em, e); + _em.replaceSelection(''); + }); + this._cm.on('keydown', (_cm, e) => { // Show hint const mode = this._cm.getOption('mode');