From 69d92e7711bbfebdfa3458db5d6e3d0e56988bb5 Mon Sep 17 00:00:00 2001 From: seonim-ryu Date: Tue, 14 Jul 2020 11:17:35 +0900 Subject: [PATCH] fix: remove logic to set value --- apps/editor/src/js/markdownEditor.js | 109 +++++-------------- apps/editor/test/unit/markdownEditor.spec.js | 11 +- 2 files changed, 33 insertions(+), 87 deletions(-) diff --git a/apps/editor/src/js/markdownEditor.js b/apps/editor/src/js/markdownEditor.js index 1c7f24089a..c698863120 100644 --- a/apps/editor/src/js/markdownEditor.js +++ b/apps/editor/src/js/markdownEditor.js @@ -16,7 +16,8 @@ import { getMdEndLine, getMdStartCh, getMdEndCh, - addChPos + addChPos, + findClosestNode } from './utils/markdown'; import { getMarkInfo } from './markTextHelper'; @@ -103,29 +104,9 @@ function isToolbarStateChanged(previousState, currentState) { return Object.keys(currentState).some(type => previousState[type] !== currentState[type]); } -function findParagraphFromFirstChild(node) { - node = node.firstChild; - - while (node) { - if (node.type === 'paragraph') { - break; - } - node = node.firstChild; - } - - return node; -} - -function isChangedSpace(e) { - const { origin, text, removed } = e; - const inputSpace = origin === '+input' && /\s/.test(text[0]); - const removedSpace = origin === '+delete' && /\s/.test(removed[0]); - - return inputSpace || removedSpace; -} - const ATTR_NAME_MARK = 'data-tui-mark'; const TASK_MARKER_RX = /^\[(\s*)(x?)(\s*)\](?:\s+)/i; +const TASK_MARKER_KEY_RX = /x|backspace/i; /** * Class MarkdownEditor @@ -197,7 +178,7 @@ class MarkdownEditor extends CodeMirrorExt { }); this.cm.on('change', (cm, cmEvent) => { - this._refreshCodeMirror(cmEvent); + this._refreshCodeMirrorMarks(cmEvent); this._emitMarkdownEditorChangeEvent(cmEvent); }); @@ -238,6 +219,12 @@ class MarkdownEditor extends CodeMirrorExt { source: 'markdown', data: keyboardEvent }); + + const { key } = keyboardEvent; + + if (TASK_MARKER_KEY_RX.test(key)) { + this._changeTextToTaskMarker(keyboardEvent); + } }); this.cm.on('copy', (cm, ev) => { @@ -349,9 +336,8 @@ class MarkdownEditor extends CodeMirrorExt { }); } - _refreshCodeMirror(e) { - const { from, to, text, origin } = e; - const changedSpace = isChangedSpace(e); + _refreshCodeMirrorMarks(e) { + const { from, to, text } = e; const changed = this.toastMark.editMarkdown( [from.line + 1, from.ch + 1], [to.line + 1, to.ch + 1], @@ -364,13 +350,7 @@ class MarkdownEditor extends CodeMirrorExt { return; } - changed.forEach(editResult => { - this._markNodes(editResult); - - if (!changedSpace) { - this._changeTaskMarker(editResult, origin); - } - }); + changed.forEach(editResult => this._markNodes(editResult)); } _markNodes(editResult) { @@ -410,48 +390,18 @@ class MarkdownEditor extends CodeMirrorExt { } } - _changeTaskMarker(editResult, eventType) { - const { nodes } = editResult; - - if (eventType === 'paste') { - this._replacedRangeLines = {}; - } else if (eventType !== 'replacedRange') { - this._replacedRangeLines = null; - } - - const customEventType = eventType === 'paste' ? 'replacedRange' : ''; - - if (nodes.length) { - for (const parent of nodes) { - const walker = parent.walker(); - let event = walker.next(); - - while (event) { - const { node, entering } = event; - - // eslint-disable-next-line max-depth - if (entering && node.type === 'item' && !node.listData.task) { - const paraNode = findParagraphFromFirstChild(node); - - this._changeTextToTaskMarker(paraNode, customEventType); - } - event = walker.next(); - } - } - } - } - - _changeTextToTaskMarker(paraNode, eventType) { - const paraTextNode = paraNode && paraNode.firstChild; + _changeTextToTaskMarker() { + const { line: curLine, ch: curCh } = this.cm.getCursor(); + const mdCh = this.cm.getLine(curLine).length === curCh ? curCh : curCh + 1; + const mdNode = this.toastMark.findNodeAtPosition([curLine + 1, mdCh]); + const paraNode = findClosestNode( + mdNode, + node => node.type === 'paragraph' && node.parent && node.parent.type === 'item' + ); - if (paraTextNode) { - const { literal, sourcepos } = paraTextNode; + if (paraNode && paraNode.firstChild) { + const { literal, sourcepos } = paraNode.firstChild; const [[line, ch]] = sourcepos; - - if (!literal || (this._replacedRangeLines && this._replacedRangeLines[line])) { - return; - } - const matched = literal.match(TASK_MARKER_RX); if (matched) { @@ -459,19 +409,10 @@ class MarkdownEditor extends CodeMirrorExt { const spaces = startSpaces.length + lastSpaces.length; const startPos = { line: line - 1, ch }; - if (eventType) { - this._replacedRangeLines[line] = true; - } - if (stateChar) { - this.cm.replaceRange( - stateChar, - startPos, - addChPos(startPos, spaces ? spaces + 1 : 0), - eventType - ); + this.cm.replaceRange(stateChar, startPos, addChPos(startPos, spaces ? spaces + 1 : 0)); } else if (!spaces) { - this.cm.replaceRange(' ', startPos, startPos, eventType); + this.cm.replaceRange(' ', startPos, startPos); } } } diff --git a/apps/editor/test/unit/markdownEditor.spec.js b/apps/editor/test/unit/markdownEditor.spec.js index 911d69bedd..ad8ec58ef5 100644 --- a/apps/editor/test/unit/markdownEditor.spec.js +++ b/apps/editor/test/unit/markdownEditor.spec.js @@ -78,18 +78,19 @@ describe('MarkdownEditor', () => { describe('tasklist', () => { let setValue, setCursor, setSelection, getValue; - let toggleTaskStates; + let changeTextToTaskMarker, toggleTaskStates; function init() { const doc = mde.getEditor().getDoc(); setValue = val => mde.setValue(val); setCursor = pos => doc.setCursor(pos); - setSelection = (anchor, head) => { - doc.setSelection(anchor, head); + setSelection = (from, to) => { + doc.setSelection(from, to); }; getValue = () => mde.getValue(); toggleTaskStates = () => mde._toggleTaskStates(); + changeTextToTaskMarker = () => mde._changeTextToTaskMarker(); } beforeEach(() => { @@ -100,6 +101,7 @@ describe('MarkdownEditor', () => { it('spaces before state character in marker are removed', () => { setValue('* [ x] list'); setCursor({ line: 0, ch: 3 }); + changeTextToTaskMarker(); expect(getValue()).toBe('* [x] list'); }); @@ -107,6 +109,7 @@ describe('MarkdownEditor', () => { it('spaces after state character in marker are removed', () => { setValue('* [x ] list'); setCursor({ line: 0, ch: 5 }); + changeTextToTaskMarker(); expect(getValue()).toBe('* [x] list'); }); @@ -114,6 +117,7 @@ describe('MarkdownEditor', () => { it('all spaces in marker are removed', () => { setValue('* [ x ] list'); setCursor({ line: 0, ch: 3 }); + changeTextToTaskMarker(); expect(getValue()).toBe('* [x] list'); }); @@ -121,6 +125,7 @@ describe('MarkdownEditor', () => { it('space is added if marker has no spaces', () => { setValue('* [] list'); setCursor({ line: 0, ch: 3 }); + changeTextToTaskMarker(); expect(getValue()).toBe('* [ ] list'); });