[client-app] Fix the unapply transformation for overlaid components

Summary:
The unapply transformation was incorrectly passing the props parameter
to buildAnchorTag() as a string, even though it expects an object.
buildAnchorTag() goes on to stringify this parameter, which causes extra
surrounding quotations and escape slashes in front of all the other
quotations. The unapply transform is applied on several re-renders,
which causes the number of escape characters to unboundedly increase.
Firstly, this was causing inline images to not appear properly in the
draft, and secondly, the large number of escape characters was making
the draft body large enough to make the app unresponsive.

This generally wasn't an issue because the unapply transformation is
only applied when there has been an apply transformation, and this is
triggered by the SyncbackDraftTask. This task was previously only queued
upon send, in which case the user never re-opens the draft. Now,
enabling send-later on a draft will queue the task, and these issues
appear if the user re-opens the draft for editing.

This diff makes it so that the unapply transform passes in the props as
an object, like the buildAnchorTag function expects.

Test Plan: manual

Reviewers: evan, juan

Reviewed By: evan, juan

Differential Revision: https://phab.nylas.com/D4348
This commit is contained in:
Halla Moore 2017-04-04 15:30:33 -07:00
parent 2b39af5aba
commit 5c8915f144

View file

@ -32,7 +32,7 @@ export default class OverlaidComposerExtension extends ComposerExtension {
const overlayEls = Array.from(draftBodyRootNode.querySelectorAll('overlay[data-overlay-id]'));
for (const overlayEl of overlayEls) {
const {componentKey, componentProps, overlayId, style} = overlayEl.dataset;
const {anchorTag} = OverlaidComponents.buildAnchorTag(componentKey, componentProps, overlayId, style);
const {anchorTag} = OverlaidComponents.buildAnchorTag(componentKey, JSON.parse(componentProps), overlayId, style);
const anchorFragment = document.createRange().createContextualFragment(anchorTag);
overlayEl.parentNode.replaceChild(anchorFragment, overlayEl);
}