fix: wrong additional br (fix #200)

src/js/convertor.js

@@ -210,7 +210,7 @@ class Convertor {
     const FIND_BR_RX = /<br>/ig;
     const FIND_DOUBLE_BR_RX = /<br \/><br \/>/ig;
     const FIND_PASSING_AND_NORMAL_BR_RX = /<br data-tomark-pass \/><br \/>(.)/ig;
-    const FIRST_TWO_BRS_BEFORE_RX = /([^>]|<\/b>|<\/i>|<\/s>|<img [^>]*>)/;
+    const FIRST_TWO_BRS_BEFORE_RX = /([^>]|<\/a>|<\/code>|<\/span>|<\/b>|<\/i>|<\/s>|<img [^>]*>)/;
     const TWO_BRS_RX = /<br data-tomark-pass \/><br data-tomark-pass \/>/;
     const FIND_FIRST_TWO_BRS_RX = new RegExp(FIRST_TWO_BRS_BEFORE_RX.source + TWO_BRS_RX.source, 'g');
 

test/e2e/.eslintrc

@@ -0,0 +1,20 @@
+{
+  "env":{
+    "es6": true,
+    "amd": true,
+    "jasmine": true
+  },
+  "globals": {
+    "test": true,
+    "fixture": true
+  },
+  "rules": {
+    "linebreak-style": 0,
+    "max-len": [2, {"code": 120, "tabWidth": 4, "ignoreStrings": true, "ignoreComments": true, "ignoreRegExpLiterals": true, "ignoreTemplateLiterals": true}],
+    "no-sync": 0,
+    "max-nested-callbacks": 0,
+    "require-jsdoc": 0,
+    "no-unused-expressions": 0,
+    "new-cap": 0
+  }
+}

test/e2e/editorFixture.js

@@ -1,4 +1,4 @@
-import { Selector } from 'testcafe';
+import {Selector, t} from 'testcafe';
 
 class Toolbar {
   constructor() {
@@ -25,6 +25,29 @@ class Toolbar {
   }
 }
 
+class Tabbar {
+  constructor() {
+    const tabbar = Selector('.tui-editor-defaultUI > .te-mode-switch-section');
+
+    this.markdown = tabbar.find('.markdown');
+    this.wysiwyg = tabbar.find('.wysiwyg');
+  }
+}
+
+class Popup {
+  constructor() {
+    const link = Selector('.te-popup-add-link');
+
+    this.linkText = link.find('.te-link-text-input');
+    this.linkURL = link.find('.te-url-input');
+    this.linkConfirm = link.find('.te-ok-button');
+    this.linkCancel = link.find('.te-close-button');
+
+    const color = Selector('.tui-popup-color');
+    this.colorConfirm = color.find('.te-apply-button');
+  }
+}
+
 class Markdown {
   constructor() {
     const editor = Selector('.te-md-container .te-editor');
@@ -42,9 +65,41 @@ class Markdown {
   }
 }
 
-export default new class Editor {
-  constructor () {
-    this.toolbar = new Toolbar();
-    this.markdown = new Markdown();
+class Wysiwyg {
+  constructor() {
+    const editor = Selector('.te-ww-container .te-editor');
+    const contentArea = editor.find('.tui-editor-contents');
+
+    this.blocks = contentArea.find('div,h1,h2,h3,h4,h5,h6,ul,ol,hr,table,pre');
+  }
+}
+
+class Editor {
+  ZWS = String.fromCharCode(0x200b);
+
+  toolbar = new Toolbar();
+
+  tabbar = new Tabbar();
+
+  markdown = new Markdown();
+
+  wysiwyg = new Wysiwyg();
+
+  popup = new Popup();
+
+  async showWysiwyg() {
+    await t.click(this.tabbar.wysiwyg);
+    await this.fixWysiwygCaret();
+  }
+
+  async fixWysiwygCaret() {
+    await t.click(this.toolbar.code)
+      .click(this.toolbar.code);
   }
-}();
+
+  async showMarkdown() {
+    await t.click(this.tabbar.markdown);
+  }
+}
+
+export default new Editor();

test/e2e/wysiwyg/newLine.spec.js

@@ -0,0 +1,57 @@
+import editor from '../editorFixture';
+
+fixture`wysiwyg new line`
+  .page`http://localhost:8080/examples/example13-all-extension-blank.html`;
+
+test('should convert BR after links #200', async t => {
+  await editor.showWysiwyg();
+  await t
+    .click(editor.toolbar.link)
+    .typeText(editor.popup.linkText, 'test')
+    .typeText(editor.popup.linkURL, 'url')
+    .click(editor.popup.linkConfirm)
+    .pressKey('enter')
+    .pressKey('enter');
+  await editor.fixWysiwygCaret();
+  await t
+    .typeText(editor.wysiwyg.blocks.nth(2), 'text')
+    .click(editor.tabbar.markdown)
+    .expect(editor.markdown.lines.nth(0).textContent).eql('[test](url)')
+    .expect(editor.markdown.lines.nth(1).textContent).eql(editor.ZWS)
+    .expect(editor.markdown.lines.nth(2).textContent).eql('text');
+});
+
+test('should convert BR after code #200', async t => {
+  await editor.showWysiwyg();
+  await t
+    .click(editor.toolbar.code)
+    .typeText(editor.wysiwyg.blocks.nth(0), 'test')
+    .click(editor.toolbar.code)
+    .pressKey('enter')
+    .pressKey('enter');
+  await editor.fixWysiwygCaret();
+  await t
+    .typeText(editor.wysiwyg.blocks.nth(2), 'text')
+    .click(editor.tabbar.markdown)
+    .expect(editor.markdown.lines.nth(0).textContent).eql('`test`')
+    .expect(editor.markdown.lines.nth(1).textContent).eql(editor.ZWS)
+    .expect(editor.markdown.lines.nth(2).textContent).eql('text');
+});
+
+test('should convert BR after span color #200', async t => {
+  await editor.showWysiwyg();
+  await t
+    .typeText(editor.wysiwyg.blocks.nth(0), 'test')
+    .pressKey('enter')
+    .pressKey('enter');
+  await editor.fixWysiwygCaret();
+  await t
+    .typeText(editor.wysiwyg.blocks.nth(2), 'text')
+    .selectText(editor.wysiwyg.blocks.nth(0))
+    .click(editor.toolbar.color)
+    .click(editor.popup.colorConfirm)
+    .click(editor.tabbar.markdown)
+    .expect(editor.markdown.lines.nth(0).textContent).eql('<span style="color:#f8f8f8">test</span>')
+    .expect(editor.markdown.lines.nth(1).textContent).eql(editor.ZWS)
+    .expect(editor.markdown.lines.nth(2).textContent).eql('text');
+});

test/unit/convertor.spec.js

@@ -111,6 +111,17 @@ describe('Convertor', () => {
     it('should treat $ special characters', () => {
       expect(convertor.toMarkdown('<span>,;:$&+=</span>').trim()).toEqual('<span>,;:$&+=</span>');
     });
+
+    it('should convert BRs to newline', () => {
+      expect(convertor.toMarkdown('text<br><br>text')).toBe('text\n\ntext');
+      expect(convertor.toMarkdown('<b>text</b><br><br>text')).toBe('**text**\n\ntext');
+      expect(convertor.toMarkdown('<i>text</i><br><br>text')).toBe('_text_\n\ntext');
+      expect(convertor.toMarkdown('<s>text</s><br><br>text')).toBe('~~text~~\n\ntext');
+      expect(convertor.toMarkdown('<code>text</code><br><br>text')).toBe('`text`\n\ntext');
+      expect(convertor.toMarkdown('<a href="some_url">text</a><br><br>text')).toBe('[text](some_url)\n\ntext');
+      expect(convertor.toMarkdown('<span style="color:#ff0000">text</span><br><br>text'))
+        .toBe('<span style="color:#ff0000">text</span>\n\ntext');
+    });
   });
 
   describe('event', () => {
@@ -149,7 +160,8 @@ describe('Convertor', () => {
         'paragraph',
         '',
         '    code',
-        '    block'].join('\n');
+        '    block'
+      ].join('\n');
       const expectedMarkdown = [
         '* codeblock',
         '',
@@ -172,7 +184,8 @@ describe('Convertor', () => {
         '<p>paragraph</p>',
         '<pre><code>code',
         'block</code></pre>',
-        ''].join('\n');
+        ''
+      ].join('\n');
 
       const result = convertor.toHTML(markdown);
 
@@ -188,7 +201,8 @@ describe('Convertor', () => {
         '',
         'paragraph',
         '',
-        '> blockquote'].join('\n');
+        '> blockquote'
+      ].join('\n');
       const html = [
         '<ul>',
         '<li>&gt; blockquote</li>',
@@ -209,7 +223,8 @@ describe('Convertor', () => {
         '',
         'paragraph',
         '',
-        '> blockquote'].join('\n');
+        '> blockquote'
+      ].join('\n');
 
       const result = convertor.toHTML(markdown);
 
@@ -221,16 +236,19 @@ describe('Convertor', () => {
       const markdown = [
         '```',
         '<span>',
-        '```'].join('\n');
+        '```'
+      ].join('\n');
       const html = [
         '<pre><code>&lt;span&gt;',
         '</code></pre>',
-        ''].join('\n');
+        ''
+      ].join('\n');
       const resultMarkdown = [
         '```',
         '<span>',
         '',
-        '```'].join('\n');
+        '```'
+      ].join('\n');
 
       expect(convertor.toHTML(markdown)).toEqual(html);
       expect(convertor.toMarkdown(html)).toEqual(resultMarkdown);