From 125bc3c31d983611ad28f350c889bd2783f44830 Mon Sep 17 00:00:00 2001
From: Zihua Li <i@zihua.li>
Date: Thu, 30 Apr 2020 08:52:45 +0800
Subject: [PATCH] Fix length mismatch when copying code (#3028)

---
 formats/code.js             | 12 +++++++++---
 modules/syntax.js           | 12 ++++++++++++
 test/unit/core/editor.js    | 16 +++++++++++++---
 test/unit/modules/syntax.js |  8 ++++++++
 4 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/formats/code.js b/formats/code.js
index 25719b4f2f..edb653eca2 100644
--- a/formats/code.js
+++ b/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>`;
   }
 }
 
diff --git a/modules/syntax.js b/modules/syntax.js
index f62882bdcf..70e135423a 100644
--- a/modules/syntax.js
+++ b/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 (
diff --git a/test/unit/core/editor.js b/test/unit/core/editor.js
index 2f2f099e35..5224624d5f 100644
--- a/test/unit/core/editor.js
+++ b/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>');
     });
   });
 });
diff --git a/test/unit/modules/syntax.js b/test/unit/modules/syntax.js
index 89420ae2f9..828e955989 100644
--- a/test/unit/modules/syntax.js
+++ b/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"',
+      );
+    });
+  });
 });