diff --git a/editors/demo/src/Editoria/demo.js b/editors/demo/src/Editoria/demo.js
index bfa99bad084ff7a6ded1fba8bc2cbe1ffd90c3fd..7b145a3585cd7a0df77baef80d78f77c1ec14801 100644
--- a/editors/demo/src/Editoria/demo.js
+++ b/editors/demo/src/Editoria/demo.js
@@ -1 +1 @@
-export const demo = `<h1>Chapter Title</h1><h2>Notes with drag and drop</h2><p class=\"paragraph\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros turpis, imperdiet viverra purus eget, fermentum porttitor dui. Etiam quis venenatis risus, sit amet bibendum turpis.<span class=\"insertion\" data-id=\"\" data-user=\"1234\" data-username=\"demo\" data-date=\"0\" data-group=\"\" data-viewid=\"\"> </span>Vestibulum non nibh at dolor sodales euismod.<footnote id=\"babccc4a-858e-4296-acf5-8f7f76857f82\">note 2 with <span class=\"deletion\" data-id=\"\" data-user=\"1234\" data-username=\"demo\" data-date=\"0\" data-group=\"\" data-viewid=\"\">some</span> more content</footnote> Maecenas mattis nulla in eros pretium, eu commodo sem sagittis. Nam eu varius justo. Nullam volutpat diam sit amet nunc aliquam convallis. Aliquam non eleifend dolor. Cras in urna lacinia, tempor tellus non, faucibus leo. Etiam mi elit,<footnote id=\"151828f4-7a2a-4b8f-b50e-8f8821c8db57\">note 1 <span class=\"comment\" data-id=\"0df32290-1336-4dc6-9255-0f83016dc382\" data-conversation=\"[{"content":"comment","displayName":"demo","timestamp":1601559909838}]\" data-viewid=\"b8cc2013-ba52-48cb-b42c-dbe407de0c69\" data-group=\"notes\">content</span><span class=\"insertion\" data-id=\"\" data-user=\"1234\" data-username=\"demo\" data-date=\"0\" data-group=\"\" data-viewid=\"\"> and tracked text</span></footnote> euismod sit amet tellus sed, molestie gravida tortor.</p><h2>Lists</h2><ol><li><p class=\"paragraph\">list item 1</p></li><li><p class=\"paragraph\">list <span class=\"comment\" data-id=\"6b46da14-ebc3-4398-a243-018d8c0f9c79\" data-conversation=\"[{"content":"demo comment","displayName":"demo","timestamp":1601559766164}]\" data-viewid=\"main\" data-group=\"main\">item</span> 2</p><p class=\"paragraph\">list item 2 second paragraph</p></li><li><p class=\"paragraph\">list item 3</p><ol><li><p class=\"paragraph\">nested 1</p></li><li><p class=\"paragraph\">nested 2</p></li><li><p class=\"paragraph\">nested 3</p></li></ol></li><li><p class=\"paragraph\">list item 4</p></li></ol><h2>Track Changes</h2><p class=\"paragraph\">Quisque posuere <span class=\"deletion\" data-id=\"\" data-user=\"1234\" data-username=\"demo\" data-date=\"0\" data-group=\"\" data-viewid=\"\">velit ut venenatis tempor. Donec mollis dictum magna, ac ullamcorper nibh dignissim at. Aliquam malesuada id dolor non ornare. Morbi condimentum a justo id </span>fermentum. In eget metus ac ante fermentum suscipit. Donec eleifend cursus suscipit. <strong><span class=\"format-change\" data-id=\"37f76a5f-f8fa-474d-a37d-e9d8fdeea0f5\" data-user=\"1234\" data-username=\"demo\" data-date=\"1609243477509\" data-before=\"[]\" data-after=\"["strong"]\" data-group=\"main\" data-viewid=\"main\">Donec</span></strong> velit lectus, ultricies a pulvinar eu, eleifend non metus. Duis ut volutpat nunc. Nunc elementum id nulla nec tempor. Sed fringilla lacinia diam non tempus.</p><p class=\"paragraph\">Proin sed odio sit amet erat volutpat tempus non et metus. Cras vitae ullamcorper diam. Proin blandit scelerisque vulputate. In elementum rutrum urna ac posuere. Nam at ex ipsum. Morbi ornare lacus vel orci congue, sed hendrerit mauris convallis. Etiam<span class=\"insertion\" data-id=\"\" data-user=\"b3cfc28e-0f2e-45b5-b505-e66783d4f946\" data-username=\"admin\" data-date=\"0\" data-group=\"\" data-viewid=\"\" style=\"color: royalblue;\"> an addition</span> in aliquam ex.</p><h2>Code blocks</h2><pre data-params=\"\"><code>#include <iostream>\nint main(int argc, char *argv[]) {\n\n /* An annoying \"Hello World\" example */\n for (auto i = 0; i < 0xFFFF; i++)\n cout << \"Hello, World!\" << endl;\n\n char c = '\n';\n unordered_map <string, vector<string> > m;\n m[\"key\"] = \"\"; // this is an error\n\n return -2e3 + 12l;\n}</code></pre><h2>Tables</h2><table><tbody><tr><th colspan=\"4\"><p class=\"paragraph\">TABLE HEADER</p></th></tr><tr><td><p class=\"paragraph\">a <span class=\"comment\" data-id=\"dbc46918-f926-4126-85c7-2a6876d24528\" data-conversation=\"[{"content":"comment","displayName":"demo","timestamp":1601559775708}]\" data-viewid=\"main\" data-group=\"main\">random</span> value</p></td><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td></tr><tr><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\">another one</p></td><td><p class=\"paragraph\"></p></td></tr><tr><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td></tr></tbody></table><p class=\"paragraph\">Integer eu ornare turpis, vel faucibus augue. Integer tempus sed nisl ac tempus. Vivamus iaculis tempor nisl ut congue. Ut nec sollicitudin magna. Morbi consequat ultricies ligula, vel egestas lorem. Nulla volutpat lectus lectus, eu feugiat nisl ultrices id. Donec suscipit, felis et eleifend ultricies, sem tortor fermentum libero, at elementum nisl nulla a odio. Ut ut tempus massa. Vestibulum porttitor nisl id velit dapibus, eget molestie ex placerat. Proin sagittis elit in nulla semper gravida. Sed laoreet rutrum fermentum.</p><h2>Math</h2><math-display class=\"math-node\">A = \\begin{bmatrix} x & y \\\\ z & w \\end{bmatrix}</math-display><p class=\"paragraph\"></p><p class=\"paragraph\">Quisque vel vehicula orci. Quisque congue accumsan mi, nec dapibus lectus interdum non. Curabitur consectetur pellentesque mattis. Etiam dignissim quam in dui pretium pulvinar. Vestibulum vehicula vulputate arcu quis luctus. Donec sollicitudin nisl a lacinia placerat. Sed elit odio, fermentum ac tempor eget, viverra et ipsum.</p>`;
+export const demo = `<h1>Chapter Title</h1><h2>Notes with drag and drop</h2><p class=\"paragraph\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros turpis, imperdiet viverra purus eget, fermentum porttitor dui. Etiam quis venenatis risus, sit amet bibendum turpis.<span class=\"insertion\" data-id=\"\" data-user=\"1234\" data-username=\"demo\" data-date=\"0\" data-group=\"\" data-viewid=\"\"> </span>Vestibulum non nibh at dolor sodales euismod.<footnote id=\"babccc4a-858e-4296-acf5-8f7f76857f82\">note 2 with <span class=\"deletion\" data-id=\"\" data-user=\"1234\" data-username=\"demo\" data-date=\"0\" data-group=\"\" data-viewid=\"\">some</span> more content</footnote> Maecenas mattis nulla in eros pretium, eu commodo sem sagittis. Nam eu varius justo. Nullam volutpat diam sit amet nunc aliquam convallis. Aliquam non eleifend dolor. Cras in urna lacinia, tempor tellus non, faucibus leo. Etiam mi elit,<footnote id=\"151828f4-7a2a-4b8f-b50e-8f8821c8db57\">note 1 content<span class=\"insertion\" data-id=\"\" data-user=\"1234\" data-username=\"demo\" data-date=\"0\" data-group=\"\" data-viewid=\"\"> and tracked text</span></footnote> euismod sit amet tellus sed, molestie gravida tortor.</p><h2>Lists</h2><ol><li><p class=\"paragraph\">list item 1</p></li><li><p class=\"paragraph\">list <span class=\"comment\" data-id=\"6b46da14-ebc3-4398-a243-018d8c0f9c79\" data-conversation=\"[{"content":"demo comment","displayName":"demo","timestamp":1601559766164}]\" data-viewid=\"main\" data-group=\"main\">item</span> 2</p><p class=\"paragraph\">list item 2 second paragraph</p></li><li><p class=\"paragraph\">list item 3</p><ol><li><p class=\"paragraph\">nested 1</p></li><li><p class=\"paragraph\">nested 2</p></li><li><p class=\"paragraph\">nested 3</p></li></ol></li><li><p class=\"paragraph\">list item 4</p></li></ol><h2>Track Changes</h2><p class=\"paragraph\">Quisque posuere <span class=\"deletion\" data-id=\"\" data-user=\"1234\" data-username=\"demo\" data-date=\"0\" data-group=\"\" data-viewid=\"\">velit ut venenatis tempor. Donec mollis dictum magna, ac ullamcorper nibh dignissim at. Aliquam malesuada id dolor non ornare. Morbi condimentum a justo id </span>fermentum. In eget metus ac ante fermentum suscipit. Donec eleifend cursus suscipit. <strong><span class=\"format-change\" data-id=\"37f76a5f-f8fa-474d-a37d-e9d8fdeea0f5\" data-user=\"1234\" data-username=\"demo\" data-date=\"1609243477509\" data-before=\"[]\" data-after=\"["strong"]\" data-group=\"main\" data-viewid=\"main\">Donec</span></strong> velit lectus, ultricies a pulvinar eu, eleifend non metus. Duis ut volutpat nunc. Nunc elementum id nulla nec tempor. Sed fringilla lacinia diam non tempus.</p><p class=\"paragraph\">Proin sed odio sit amet erat volutpat tempus non et metus. Cras vitae ullamcorper diam. Proin blandit scelerisque vulputate. In elementum rutrum urna ac posuere. Nam at ex ipsum. Morbi ornare lacus vel orci congue, sed hendrerit mauris convallis. Etiam<span class=\"insertion\" data-id=\"\" data-user=\"b3cfc28e-0f2e-45b5-b505-e66783d4f946\" data-username=\"admin\" data-date=\"0\" data-group=\"\" data-viewid=\"\" style=\"color: royalblue;\"> an addition</span> in aliquam ex.</p><h2>Code blocks</h2><pre data-params=\"\"><code>#include <iostream>\nint main(int argc, char *argv[]) {\n\n /* An annoying \"Hello World\" example */\n for (auto i = 0; i < 0xFFFF; i++)\n cout << \"Hello, World!\" << endl;\n\n char c = '\n';\n unordered_map <string, vector<string> > m;\n m[\"key\"] = \"\"; // this is an error\n\n return -2e3 + 12l;\n}</code></pre><h2>Tables</h2><table><tbody><tr><th colspan=\"4\"><p class=\"paragraph\">TABLE HEADER</p></th></tr><tr><td><p class=\"paragraph\">a <span class=\"comment\" data-id=\"dbc46918-f926-4126-85c7-2a6876d24528\" data-conversation=\"[{"content":"comment","displayName":"demo","timestamp":1601559775708}]\" data-viewid=\"main\" data-group=\"main\">random</span> value</p></td><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td></tr><tr><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\">another one</p></td><td><p class=\"paragraph\"></p></td></tr><tr><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td><td><p class=\"paragraph\"></p></td></tr></tbody></table><p class=\"paragraph\">Integer eu ornare turpis, vel faucibus augue. Integer tempus sed nisl ac tempus. Vivamus iaculis tempor nisl ut congue. Ut nec sollicitudin magna. Morbi consequat ultricies ligula, vel egestas lorem. Nulla volutpat lectus lectus, eu feugiat nisl ultrices id. Donec suscipit, felis et eleifend ultricies, sem tortor fermentum libero, at elementum nisl nulla a odio. Ut ut tempus massa. Vestibulum porttitor nisl id velit dapibus, eget molestie ex placerat. Proin sagittis elit in nulla semper gravida. Sed laoreet rutrum fermentum.</p><h2>Math</h2><math-display class=\"math-node\">A = \\begin{bmatrix} x & y \\\\ z & w \\end{bmatrix}</math-display><p class=\"paragraph\"></p><p class=\"paragraph\">Quisque vel vehicula orci. Quisque congue accumsan mi, nec dapibus lectus interdum non. Curabitur consectetur pellentesque mattis. Etiam dignissim quam in dui pretium pulvinar. Vestibulum vehicula vulputate arcu quis luctus. Donec sollicitudin nisl a lacinia placerat. Sed elit odio, fermentum ac tempor eget, viverra et ipsum.</p>`;
diff --git a/editors/demo/src/NCBI/layout/EditorElements.js b/editors/demo/src/NCBI/layout/EditorElements.js
index a916f7a27990197cd78af122ccbc69a24286e65e..4ad04d332db3b9c3640c8b407465c910b6e14c13 100644
--- a/editors/demo/src/NCBI/layout/EditorElements.js
+++ b/editors/demo/src/NCBI/layout/EditorElements.js
@@ -16,7 +16,7 @@ export default css`
counter-reset: footnote;
line-height: 12px;
width: 497px;
- white-space: pre;
+ white-space: pre !important;
overflow-x: auto;
${fontWriting}
diff --git a/wax-prosemirror-core/src/WaxView.js b/wax-prosemirror-core/src/WaxView.js
index b7278d0813ccea4e4e664ae4a6e7bd353a22f37e..45bb91c6fe331e8adf704fea3d7856536be76bb4 100644
--- a/wax-prosemirror-core/src/WaxView.js
+++ b/wax-prosemirror-core/src/WaxView.js
@@ -146,7 +146,7 @@ export default props => {
}
};
- const WaxEditor = styled.div`
+ const WaxEditor = styled.span`
${styles};
`;
diff --git a/wax-prosemirror-core/src/styles/styles.js b/wax-prosemirror-core/src/styles/styles.js
index 288fccfd809a2bc39cec78302d116c1611e57598..8f226d13d0d633536ec7dbbeb32f582e6e5dfac7 100644
--- a/wax-prosemirror-core/src/styles/styles.js
+++ b/wax-prosemirror-core/src/styles/styles.js
@@ -3,10 +3,6 @@ import { css } from 'styled-components';
/* Basic styles for proseMirror view and gapCursor */
export default css`
- .ProseMirror {
- position: relative;
- }
-
.ProseMirror {
font-feature-settings: 'liga' 0; /* the above doesn't seem to work in Edge */
font-variant-ligatures: none;