From cdbff91cc82c665650d38e1234f72e0c96e06677 Mon Sep 17 00:00:00 2001 From: Steve Brudz Date: Wed, 29 Sep 2021 11:28:48 -0500 Subject: [PATCH] fix(outlook.com): fix positioning of underlines on outlook.com This fixes an issue with the underlines in emails on outlook.com appearing above the words. The root cause was that outlook.com changed the DOM structure, adding padding to the contenteditable div that was the normal parent as well as adding another containing div with no `position` attribute to the hierarchy. The new intermediate was being used as the parent for calculating coords but the coords of the words were relative to the contenteditable div. Using offsetParent instead of parentNode skips the intermediate div and makes things line up properly. fixes #134 --- package.json | 5 ++++- spec/setupTests.js | 7 +++++++ src/components/JustNotSorry.js | 4 ++-- 3 files changed, 13 insertions(+), 3 deletions(-) create mode 100644 spec/setupTests.js diff --git a/package.json b/package.json index 9612052..c5700b3 100644 --- a/package.json +++ b/package.json @@ -86,7 +86,10 @@ "^react$": "preact/compat", "^react-dom/test-utils$": "preact/test-utils", "^react-dom$": "preact/compat" - } + }, + "setupFilesAfterEnv": [ + "/spec/setupTests.js" + ] }, "snapshotSerializers": [ "preact-render-spy/snapshot" diff --git a/spec/setupTests.js b/spec/setupTests.js new file mode 100644 index 0000000..2edf6b0 --- /dev/null +++ b/spec/setupTests.js @@ -0,0 +1,7 @@ +// Work-around for jsdom not supporting offsetParent +// https://github.com/jsdom/jsdom/issues/1261 +Object.defineProperty(HTMLElement.prototype, 'offsetParent', { + get() { + return this.parentNode; + }, +}); diff --git a/src/components/JustNotSorry.js b/src/components/JustNotSorry.js index ecd87cf..3f2af02 100644 --- a/src/components/JustNotSorry.js +++ b/src/components/JustNotSorry.js @@ -50,8 +50,8 @@ class JustNotSorry extends Component { : findRanges(email, patterns); this.setState(({ parentNode }) => - parentNode.id !== email.parentNode.id - ? { parentNode: email.parentNode, warnings: newWarnings } + parentNode.id !== email.offsetParent.id + ? { parentNode: email.offsetParent, warnings: newWarnings } : { parentNode, warnings: newWarnings } ); }