fix(creator-studio): respect line breaks when deleting blocks

assets/creator-studio/tests/block-deletion.test.cjs

@@ -14,6 +14,12 @@ const compiled = ts.transpileModule(source, {
 const runtime = {};
 new Function('exports', compiled)(runtime);
 const { removeAdjacentBlock } = runtime;
+const serializeSource = fs.readFileSync(path.join(__dirname, '../src/utils/serialize.ts'), 'utf8');
+const serializeCompiled = ts.transpileModule(serializeSource, {
+  compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2020 },
+}).outputText;
+const serializer = {};
+new Function('exports', serializeCompiled)(serializer);
 
 function fixture(html, nodeSelector, offset = 0) {
   const dom = new JSDOM(`<!doctype html><body contenteditable="true">${html}</body>`);
@@ -72,12 +78,56 @@ test('Delete removes a following list only at the end of ordinary text', () => {
 });
 
 test('a displayed formula is removed with its paragraph wrapper', () => {
-  const f = fixture('<p><span class="jio-math jio-math--block" contenteditable="false">x</span><br data-mce-bogus="1"></p><p>next</p>', 'p', 0);
+  const f = fixture('<p><span class="jio-math jio-math--block" contenteditable="false">x</span><br data-mce-bogus="1"></p><p>next</p>', 'p', 1);
   assert.equal(f.press('Backspace').prevented, true);
   assert.equal(f.body.innerHTML, '<p>next</p>');
   assert.equal(f.editor.selection.getRng().startContainer, f.body.querySelector('p'));
 });
 
+test('Delete before a displayed formula removes only its paragraph', () => {
+  const f = fixture('<p>before</p><p><span class="jio-math jio-math--block" contenteditable="false">x</span></p>', 'p:nth-child(2)', 0);
+  assert.equal(f.press('Delete').prevented, true);
+  assert.equal(f.body.innerHTML, '<p>before</p>');
+});
+
+test('Backspace on the line after a formula removes the empty line first', () => {
+  const f = fixture('<p><span class="jio-math jio-math--block" contenteditable="false">x</span></p><p><br data-mce-bogus="1"></p>', 'p:nth-child(2)', 0);
+  assert.equal(f.press('Backspace').prevented, true);
+  assert.equal(f.body.querySelectorAll('.jio-math--block').length, 1);
+  assert.equal(f.body.children.length, 1);
+  assert.equal(f.editor.selection.getRng().startContainer, f.body);
+  assert.equal(f.press('Backspace').prevented, true);
+  assert.equal(f.body.querySelectorAll('.jio-math--block').length, 0);
+  assert.equal(f.body.firstElementChild.tagName, 'P');
+});
+
+test('Backspace on an empty line after a table preserves the table', () => {
+  const f = fixture('<table><tbody><tr><td>data</td></tr></tbody></table><p><br></p>', 'p', 0);
+  assert.equal(f.press('Backspace').prevented, true);
+  assert.equal(f.body.querySelectorAll('table').length, 1);
+  assert.equal(f.body.querySelectorAll('p').length, 0);
+});
+
+test('a saved display formula restores as one paragraph without phantom lines', () => {
+  const dom = new JSDOM('<!doctype html><body></body>');
+  const previousDocument = global.document;
+  global.document = dom.window.document;
+  try {
+    const saved = serializer.serializeBlocks('<p><span class="jio-math jio-math--block" data-jio-math-source="x^2" data-jio-math-display="1" contenteditable="false">x<sup>2</sup></span></p>');
+    dom.window.document.body.innerHTML = serializer.hydrateBlocks(saved);
+    assert.equal(dom.window.document.body.querySelectorAll('p').length, 1);
+    assert.equal(dom.window.document.body.querySelectorAll('.jio-math--block').length, 1);
+  } finally {
+    global.document = previousDocument;
+  }
+});
+
+test('a real line break inside a paragraph is not a block boundary', () => {
+  const f = fixture('<hr><p><br>text</p>', 'p', 1);
+  assert.equal(f.press('Backspace').prevented, false);
+  assert.equal(f.body.querySelectorAll('hr').length, 1);
+});
+
 test('nested quote and hidden-content editing boundaries remove the whole outer block', () => {
   for (const html of [
     '<div class="quote_q" contenteditable="false"><div contenteditable="true"><p>quote</p></div></div>',
@@ -119,7 +169,7 @@ test('body-level deletion places the caret before the next structural block', ()
 });
 
 test('media-only paragraphs are removed with their media', () => {
-  const f = fixture('<p><img src="example.jpg"><br data-mce-bogus="1"></p><p>next</p>', 'p', 0);
+  const f = fixture('<p><img src="example.jpg"><br data-mce-bogus="1"></p><p>next</p>', 'p', 1);
   assert.equal(f.press('Backspace').prevented, true);
   assert.equal(f.body.innerHTML, '<p>next</p>');
 });