Fix length mismatch when copying code (slab#3028)

formats/code.js

@@ -13,12 +13,18 @@ class CodeBlockContainer extends Container {
     return domNode;
   }
 
-  html(index, length) {
+  code(index, length) {
     const text = this.children
-      .map(child => child.domNode.innerText)
+      .map(child => (child.length() <= 1 ? '' : child.domNode.innerText))
       .join('\n')
       .slice(index, index + length);
-    return `<pre>${escapeText(text)}</pre>`;
+    return escapeText(text);
+  }
+
+  html(index, length) {
+    // `\n`s are needed in order to support empty lines at the beginning and the end.
+    // https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions
+    return `<pre>\n${this.code(index, length)}\n</pre>`;
   }
 }
 

modules/syntax.js

@@ -135,6 +135,18 @@ class SyntaxCodeBlockContainer extends CodeBlockContainer {
     }
   }
 
+  html(index, length) {
+    const [codeBlock] = this.children.find(index);
+    const language = codeBlock
+      ? SyntaxCodeBlock.formats(codeBlock.domNode)
+      : 'plain';
+
+    return `<pre data-language="${language}">\n${this.code(
+      index,
+      length,
+    )}\n</pre>`;
+  }
+
   optimize(context) {
     super.optimize(context);
     if (

test/unit/core/editor.js

@@ -727,9 +727,19 @@ describe('Editor', function() {
     });
 
     it('multiline code', function() {
-      const editor = this.initialize(Editor, '<p>0123</p><p>4567</p>');
-      editor.formatLine(0, 9, { 'code-block': 'javascript' });
-      expect(editor.getHTML(0, 9)).toEqual('<pre>0123\n4567</pre>');
+      const editor = this.initialize(
+        Editor,
+        '<p><br></p><p>0123</p><p><br></p><p><br></p><p>4567</p><p><br></p>',
+      );
+      const length = editor.scroll.length();
+      editor.formatLine(0, length, { 'code-block': 'javascript' });
+
+      expect(editor.getHTML(0, length)).toEqual(
+        '<pre>\n\n0123\n\n\n4567\n\n</pre>',
+      );
+      expect(editor.getHTML(1, 7)).toEqual('<pre>\n0123\n\n\n\n</pre>');
+      expect(editor.getHTML(2, 7)).toEqual('<pre>\n123\n\n\n4\n</pre>');
+      expect(editor.getHTML(5, 7)).toEqual('<pre>\n\n\n\n4567\n</pre>');
     });
   });
 });

test/unit/modules/syntax.js

@@ -294,4 +294,12 @@ describe('Syntax', function() {
       });
     });
   });
+
+  describe('html', function() {
+    it('code language', function() {
+      expect(this.quill.getSemanticHTML()).toContain(
+        'data-language="javascript"',
+      );
+    });
+  });
 });