Fix passing state containing regex with backslashes down to the webview #132
Conversation
We used to pass `state` to the webview by converting it to a JS expression string to be evaluated. This led to special characters (e.g. backslashes) not being escaped properly in regular expressions (they need to be escaped twice for this to work) which, in turn, prevented the web app from parsing this JSON string back into an object. The workaround is to pass the same stringified state but encoded it as base64 so we don't have to worry about escaping special characters
| @@ -207,9 +207,10 @@ export default function() { | |||
| state = Object.assign({}, state, { init }) | |||
| } | |||
| if (isWebviewPresent(windowOptions.identifier)) { | |||
| let base64EncodedState = Buffer.from(encodeURIComponent(JSON.stringify(state))).toString("base64") | |||
There was a problem hiding this comment.
I couldn't figure out how to use window.btoa() in this context so Buffer.toString("base64") to the rescue.
|
Hi @rodionovd , Thanks for reporting this bug! That will definitely help me fix it faster. I wasn't able to reproduce the bug myself, but there are a few things that might explain the difference:
Once I have this information, I'll try again to reproduce the bug. In the meantime, feel free to share any screenshots, screen recordings, or other files that might be helpful. Thank you for your cooperation! |
|
Ah, my bad: I left the most important bit out of initial report! The thing with a regular expression is that it should contain at least one backslash: e.g. "((\d+))" to match smth like "(123)". Updated Steps to Reproduce above. |
Steps to Reproduce
\((\d+)\)), replace something successfully.Expected Results
You see the same regex and all other settings you've just used on the previous step.
Actual Results
Explanation
We're currently passing
stateto the webview by converting it to a JS expression string to be evaluated.This lead to special characters (e.g. backslashes) not being escaped properly in regular expressions (they need to be escaped twice for this to work) which, in turn, prevents the web app from parsing this JSON string back into an object.
Solution
The solution is to pass the same stringified state but encoded it as base64 so we don't have to worry about escaping special characters and
JSON.parse()throwing unhandled exceptions.Note
I'm attaching a pre-built version of the plugin with this fix applied so anyone can try it and see if it works for them 👇
Find-and-replace.sketchplugin-fix-for-regex.zip
Note
An alternative workaround is to reset the plugin settings, although it won't prevent the issue from re-appearing again the next time you use regular expressions with backslashes to replace something.