Skip to content

Commit

Permalink
fix: remove highlight from preview after firing blur event (fix #1093)
Browse files Browse the repository at this point in the history
  • Loading branch information
seonim-ryu committed Jul 13, 2020
1 parent 6bcec75 commit 59cbb8d
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 0 deletions.
14 changes: 14 additions & 0 deletions apps/editor/src/js/mdPreview.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand All @@ -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));
Expand Down
38 changes: 38 additions & 0 deletions apps/editor/test/unit/mdPreview.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -165,3 +165,41 @@ describe('listen cursorActivity event', () => {
});
});
});

describe('listen blur event', () => {
let setValue, blur, getHighlightedCount;
let previewEl;

function init(highlight) {
const editorEl = document.createElement('div');

previewEl = document.createElement('div');

document.body.innerHTML = '';
document.body.appendChild(editorEl);
document.body.appendChild(previewEl);

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);

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();
expect(getHighlightedCount()).toBe(0);
});
});

0 comments on commit 59cbb8d

Please sign in to comment.