fix: remove highlight from preview after firing blur event (fix #1093) (

#1094) * fix: remove highlight from preview after firing blur event (fix #1093) * feat: apply code review
nhn · Jul 14, 2020 · 5a5ae7d · 5a5ae7d
1 parent d0b7501
commit 5a5ae7d
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 14 deletions.
diff --git a/apps/editor/src/js/mdPreview.js b/apps/editor/src/js/mdPreview.js
@@ -79,6 +79,10 @@ class MarkdownPreview extends Preview {
       this.eventManager.listen('cursorActivity', ({ markdownNode, cursor }) => {
         this._updateCursorNode(markdownNode, cursor);
       });
+
+      this.eventManager.listen('blur', () => {
+        this._removeHighlight();
+      });
     }
 
     on(this.el, 'scroll', event => {
@@ -89,6 +93,16 @@ class MarkdownPreview extends Preview {
     });
   }
 
+  _removeHighlight() {
+    if (this.cursorNodeId) {
+      const currentEl = this._getElementByNodeId(this.cursorNodeId);
+
+      if (currentEl) {
+        removeClass(currentEl, CLASS_HIGHLIGHT);
+      }
+    }
+  }
+
   _updateCursorNode(cursorNode, cursorPos) {
     if (cursorNode) {
       cursorNode = findClosestNode(cursorNode, mdNode => !isInlineNode(mdNode));

diff --git a/apps/editor/test/unit/mdPreview.spec.js b/apps/editor/test/unit/mdPreview.spec.js
@@ -49,24 +49,28 @@ describe('Preview', () => {
   });
 });
 
-describe('listen cursorActivity event', () => {
-  let setValue, setCursor, getHighlightedCount, assertHighlighted;
-  let previewEl;
+function getEditorAndPreview(highlight) {
+  const editorEl = document.createElement('div');
+  const previewEl = document.createElement('div');
 
-  function init(highlight) {
-    const editorEl = document.createElement('div');
+  document.body.innerHTML = '';
+  document.body.appendChild(editorEl);
+  document.body.appendChild(previewEl);
 
-    previewEl = document.createElement('div');
+  const eventManager = new EventManager();
+  const convertor = new Convertor(eventManager);
+  const toastMark = new ToastMark();
+  const editor = new MarkdownEditor(editorEl, eventManager, toastMark);
+  const preview = new MarkdownPreview(previewEl, eventManager, convertor, { highlight });
 
-    document.body.innerHTML = '';
-    document.body.appendChild(editorEl);
-    document.body.appendChild(previewEl);
+  return { editor, preview };
+}
+
+describe('listen cursorActivity event', () => {
+  let setValue, setCursor, getHighlightedCount, assertHighlighted;
 
-    const eventManager = new EventManager();
-    const convertor = new Convertor(eventManager);
-    const toastMark = new ToastMark();
-    const preview = new MarkdownPreview(previewEl, eventManager, convertor, { highlight });
-    const editor = new MarkdownEditor(editorEl, eventManager, toastMark);
+  function init(highlight) {
+    const { editor, preview } = getEditorAndPreview(highlight);
     const doc = editor.getEditor().getDoc();
 
     setValue = val => editor.setValue(val);
@@ -165,3 +169,30 @@ describe('listen cursorActivity event', () => {
     });
   });
 });
+
+describe('listen blur event', () => {
+  let setValue, blur, getHighlightedCount;
+
+  function init(highlight) {
+    const { editor, preview } = getEditorAndPreview(highlight);
+
+    setValue = val => {
+      editor.setValue(val);
+      editor.focus();
+    };
+    blur = () => editor.blur();
+    getHighlightedCount = () => preview.el.querySelectorAll(`.${CLASS_HIGHLIGHT}`).length;
+  }
+
+  it('the highlighting element disappears from the preview', () => {
+    init(true);
+
+    setValue('# Heading');
+    expect(getHighlightedCount()).toBe(1);
+
+    blur();
+    setTimeout(() => {
+      expect(getHighlightedCount()).toBe(0);
+    }, 7); // the test is executed before the blur event occurs on IE
+  });
+});