fix: line break works correctly (fix #552) (#596)

* feat: remove that <br> is added before <img> (fix #552)

* feat: change imported squire file

* fix: change logic to import squire module

* chore: edit test case spec

* chore: test to fixed squire

* feat: update forked version of squire

bower.json

@@ -51,7 +51,7 @@
     "markdown-it": "^8.4.0",
     "to-mark": "^1.1.7",
     "tui-color-picker": "^2.2.1",
-    "squire-rte": "seonim-ryu/Squire#10a470c9dfd07cfb37b06dedc581526b061975e1",
+    "squire-rte": "seonim-ryu/Squire#fb6cd9b1ac66ca471ded83637523c4fbf7072f86",
     "plantuml-encoder": "^1.2.5",
     "tui-chart": "^3.7.0"
   },

package.json

@@ -95,7 +95,7 @@
     "markdown-it": "^8.4.0",
     "plantuml-encoder": "^1.2.5",
     "resize-observer-polyfill": "^1.5.0",
-    "squire-rte": "github:seonim-ryu/Squire#10a470c9dfd07cfb37b06dedc581526b061975e1",
+    "squire-rte": "github:seonim-ryu/Squire#fb6cd9b1ac66ca471ded83637523c4fbf7072f86",
     "to-mark": "^1.1.7",
     "tui-chart": "^3.7.0",
     "tui-code-snippet": "^1.5.0",

src/js/wysiwygEditor.js

@@ -96,26 +96,13 @@ class WysiwygEditor {
     });
   }
 
-  /**
-   * _preprocessForInlineElement
-   * Seperate anchor tags with \u200B and replace blank space between <br> and <img to <br>$1
-   * @param {string} html Inner html of content editable
-   * @returns {string}
-   * @memberof WysiwygEditor
-   * @private
-   */
-  _preprocessForInlineElement(html) {
-    return html.replace(/<br>( *)<img/g, '<br><br>$1<img');
-  }
-
   /**
    * _initEvent
    * Initialize EventManager event handler
    * @memberof WysiwygEditor
    * @private
    */
   _initEvent() {
-    this.eventManager.listen('wysiwygSetValueBefore', html => this._preprocessForInlineElement(html));
     this.eventManager.listen('wysiwygKeyEvent', ev => this._runKeyEventHandlers(ev.data, ev.keyMap));
     this.eventManager.listen('wysiwygRangeChangeAfter', () => this.scrollIntoCursor());
     this.eventManager.listen('contentChangedFromWysiwyg', () => {

test/unit/wysiwygEditor.spec.js

@@ -291,12 +291,20 @@ describe('WysiwygEditor', () => {
       expect(wwe.getValue()).toEqual(`${expectedHtml}<br />`);
     });
 
-    it('prevent text, image merge', () => {
-      const html = '<p>test<br><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAYAAABirU3bAAAAXklEQVQIHWM8OeXvfwaW/wx/fjMwsHMwMjD9BLH+MDIwMTIy/PnJwMDMI87aIMiswCDMx89w98UNBpZX/48zbLx7h0H/TTjDo18nGZjYWVkZOLm5GU587mb4wvCcAQACuB2BMklKxwAAAABJRU5ErkJggg==" alt="image"></p>';
+    it('the line break is working between <br> to <img>.', () => {
+      let html = '<p>test<br><img src="" alt="image"></p>';
       wwe.setValue(html);
+
       expect(wwe.get$Body().find('div').length).toEqual(3);
       expect(wwe.get$Body().find('div').eq(0).text()).toEqual('test');
       expect(wwe.get$Body().find('div').eq(1).find('img').length).toEqual(1);
+
+      html = 'test<br>\n<img src="" alt="image">';
+      wwe.setValue(html);
+
+      expect(wwe.get$Body().find('div').length).toEqual(2);
+      expect(wwe.get$Body().find('div').eq(0).text()).toEqual('test');
+      expect(wwe.get$Body().find('div').eq(1).find('img').length).toEqual(1);
     });
 
     it('record undo state after all setValue process not setHTML', done => {