diff --git a/components/Editor.js b/components/Editor.js index 07d7d9f..d0ec762 100644 --- a/components/Editor.js +++ b/components/Editor.js @@ -142,24 +142,26 @@ class Editor extends React.Component { const exportSize = (EXPORT_SIZES_HASH[this.state.exportSize] || DEFAULT_EXPORT_SIZE).value - let width = node.offsetWidth * exportSize - let height = this.state.squaredImage - ? node.offsetWidth * exportSize - : node.offsetHeight * exportSize + const map = new Map() + const undoMap = value => { + map.forEach((value, node) => (node.innerText = value)) + return value + } if (isPNG) { - const newNode = node.cloneNode(true) - newNode.querySelectorAll('.CodeMirror-line span[role="presentation"]').forEach(encodeTextNode) - - newNode.style.visibility = 'hidden' - document.body.appendChild(newNode) - - width = newNode.offsetWidth * exportSize - height = this.state.squaredImage ? width : newNode.offsetHeight * exportSize - - newNode.remove() + node.querySelectorAll('span[role="presentation"]').forEach(node => { + if (node.innerText && node.innerText.match(/%\S\S/)) { + map.set(node, node.innerText) + node.innerText = encodeURIComponent(node.innerText) + } + }) } + const width = node.offsetWidth * exportSize + const height = this.state.squaredImage + ? node.offsetWidth * exportSize + : node.offsetHeight * exportSize + const config = { style: { transform: `scale(${exportSize})`, @@ -170,13 +172,6 @@ class Editor extends React.Component { if (n.className) { return String(n.className).indexOf('eliminateOnRender') < 0 } - if ( - isPNG && // only occurs when saving PNG - n.matches && - n.matches('span[role="presentation"]') - ) { - encodeTextNode(n) - } return true }, width, @@ -193,11 +188,14 @@ class Editor extends React.Component { .then(data => window.URL.createObjectURL(data)) } - return domtoimage.toBlob(node, config).then(blob => window.URL.createObjectURL(blob)) + return domtoimage + .toBlob(node, config) + .then(blob => window.URL.createObjectURL(blob)) + .then(undoMap) } // Twitter needs regular dataurls - return domtoimage.toPng(node, config) + return domtoimage.toPng(node, config).then(undoMap) } updateSetting(key, value) { @@ -376,12 +374,6 @@ class Editor extends React.Component { } } -function encodeTextNode(node) { - if (node.innerText && node.innerText.match(/%\S\S/)) { - node.innerText = encodeURIComponent(node.innerText) - } -} - function formatTimestamp() { const timezoneOffset = new Date().getTimezoneOffset() * 60000 const timeString = new Date(Date.now() - timezoneOffset)