medium-editor-tc-mention - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

CHANGELOG.md

@@ -0,1 +1,26 @@
+<a name="2.1.0"></a>
+# [2.1.0](https://github.com/tomchentw/medium-editor-tc-mention/compare/v2.0.0...v2.1.0) (2015-11-24)
+
+
+### Features
+
+* **TCMention:** add extra className map for trigger ([0b6a64e](https://github.com/tomchentw/medium-editor-tc-mention/commit/0b6a64e))
+* **TCMention:** move caret to after this.activeMentionAt when hidePanel() ([0b3d8e1](https://github.com/tomchentw/medium-editor-tc-mention/commit/0b3d8e1))
+* **TCMention:** rename options for setting className ([40d2822](https://github.com/tomchentw/medium-editor-tc-mention/commit/40d2822))
+* **TCMention:** use activeTriggerClassNameMap to mark mention at tag ([4c6503d](https://github.com/tomchentw/medium-editor-tc-mention/commit/4c6503d))
+
+
+### BREAKING CHANGES
+
+* TCMention: use extraPanelClassName and extraActivePanelClassName instead.
+
+Before & After:
+
+```js
+extraClassName -> extraPanelClassName
+extraActiveClassName -> extraActivePanelClassName
+```
+
+
+
 <a name="2.0.0"></a>
@@ -2,0 +27,0 @@ # [2.0.0](https://github.com/tomchentw/medium-editor-tc-mention/compare/v1.4.1...v2.0.0) (2015-11-13)

lib/index.js

@@ -14,2 +14,6 @@ "use strict";
 
+function last(text) {
+    return text[text.length - 1];
+}
+
 var atKeyCode = 50;
@@ -40,3 +44,4 @@ exports.atKeyCode = atKeyCode;
 
-    /* extraClassName: [string]
+    /* @deprecated: use extraPanelClassName. Will remove in next major (3.0.0) release
+     * extraClassName: [string]
      *
@@ -47,3 +52,4 @@ * Extra className to be added with the `medium-editor-mention-panel` element.
 
-    /* extraActiveClassName: [string]
+    /* @deprecated: use extraActivePanelClassName. Will remove in next major (3.0.0) release
+     * extraActiveClassName: [string]
      *
@@ -54,2 +60,18 @@ * Extra active className to be added with the `medium-editor-mention-panel-active` element.
 
+    /* extraPanelClassName: [string]
+     *
+     * Extra className to be added with the `medium-editor-mention-panel` element.
+     */
+    extraPanelClassName: "",
+
+    /* extraActivePanelClassName: [string]
+     *
+     * Extra active className to be added with the `medium-editor-mention-panel-active` element.
+     */
+    extraActivePanelClassName: "",
+
+    extraTriggerClassNameMap: {},
+
+    extraActiveTriggerClassNameMap: {},
+
     /* tagName: [string]
@@ -96,2 +118,7 @@ *
 
+    activeTriggerClassNameMap: {
+        "#": "medium-editor-mention-hash-active",
+        "@": "medium-editor-mention-at-active"
+    },
+
     hideOnBlurDelay: 300,
@@ -118,4 +145,4 @@
         el.classList.add("medium-editor-mention-panel");
-        if (this.extraClassName) {
-            el.classList.add(this.extraClassName);
+        if (this.extraPanelClassName || this.extraClassName) {
+            el.classList.add(this.extraPanelClassName || this.extraClassName);
         }
@@ -166,12 +193,44 @@
         this.mentionPanel.classList.remove("medium-editor-mention-panel-active");
-        if (this.extraActiveClassName) {
-            this.mentionPanel.classList.remove(this.extraActiveClassName);
+        if (this.extraActivePanelClassName || this.extraActiveClassName) {
+            this.mentionPanel.classList.remove(this.extraActivePanelClassName || this.extraActiveClassName);
         }
+        if (this.activeMentionAt) {
+            this.activeMentionAt.classList.remove(this.activeTriggerClassName);
+            if (this.extraActiveTriggerClassName) {
+                this.activeMentionAt.classList.remove(this.extraActiveTriggerClassName);
+            }
+        }
+        if (this.activeMentionAt) {
+            // http://stackoverflow.com/a/27004526/1458162
+            var _activeMentionAt = this.activeMentionAt;
+            var parentNode = _activeMentionAt.parentNode;
+            var nextSibling = _activeMentionAt.nextSibling;
+            var firstChild = _activeMentionAt.firstChild;
 
-        if (this.activeMentionAt) {
-            // LIKE core#execAction
-            this.base.saveSelection();
-            unwrapForTextNode(this.activeMentionAt, this.document);
-            this.base.restoreSelection();
-            // LIKE core#execAction
+            var textNode = nextSibling;
+            if (!nextSibling) {
+                textNode = this.document.createTextNode("");
+                parentNode.appendChild(textNode);
+            } else if (3 !== nextSibling.nodeType) {
+                textNode = this.document.createTextNode("");
+                parentNode.insertBefore(textNode, nextSibling);
+            }
+            var lastEmptyWord = last(firstChild.textContent);
+            var hasLastEmptyWord = 0 === lastEmptyWord.trim().length;
+            if (hasLastEmptyWord) {
+                firstChild.textContent = firstChild.textContent.substr(0, firstChild.textContent.length - 1);
+                textNode.textContent = "" + lastEmptyWord + textNode.textContent;
+            } else {
+                if (0 === textNode.textContent.length && 1 < firstChild.textContent.length) {
+                    textNode.textContent = " ";
+                }
+            }
+            _mediumEditor2["default"].selection.select(this.document, textNode, Math.min(textNode.length, 1));
+            if (1 >= firstChild.textContent.length) {
+                // LIKE core#execAction
+                this.base.saveSelection();
+                unwrapForTextNode(this.activeMentionAt, this.document);
+                this.base.restoreSelection();
+            }
+            //
             this.activeMentionAt = null;
@@ -200,3 +259,2 @@ }
                     diff = _x2;
-                prevText = undefined;
                 _again = false;
@@ -211,2 +269,3 @@
                     _again = true;
+                    prevText = undefined;
                     continue _function;
@@ -222,2 +281,6 @@ }
         this.triggerClassName = this.triggerClassNameMap[this.trigger];
+        this.activeTriggerClassName = this.activeTriggerClassNameMap[this.trigger];
+        //
+        this.extraTriggerClassName = this.extraTriggerClassNameMap[this.trigger];
+        this.extraActiveTriggerClassName = this.extraActiveTriggerClassNameMap[this.trigger];
     },
@@ -236,4 +299,4 @@
         this.mentionPanel.classList.add("medium-editor-mention-panel-active");
-        if (this.extraActiveClassName) {
-            this.mentionPanel.classList.add(this.extraActiveClassName);
+        if (this.extraActivePanelClassName || this.extraActiveClassName) {
+            this.mentionPanel.classList.add(this.extraActivePanelClassName || this.extraActiveClassName);
         }
@@ -244,5 +307,10 @@ },
         var selection = this.document.getSelection();
-        if (selection.rangeCount) {
-            // http://stackoverflow.com/a/6328906/1458162
-            var range = selection.getRangeAt(0).cloneRange();
+        if (!selection.rangeCount) {
+            return;
+        }
+        // http://stackoverflow.com/a/6328906/1458162
+        var range = selection.getRangeAt(0).cloneRange();
+        if (range.startContainer.parentNode.classList.contains(this.triggerClassName)) {
+            this.activeMentionAt = range.startContainer.parentNode;
+        } else {
             range.setStart(range.startContainer, this.wordStart);
@@ -254,2 +322,5 @@ range.setEnd(range.startContainer, Math.min(this.wordEnd, range.startContainer.textContent.length));
             element.classList.add(this.triggerClassName);
+            if (this.extraTriggerClassName) {
+                element.classList.add(this.extraTriggerClassName);
+            }
             this.activeMentionAt = element;
@@ -260,5 +331,8 @@ //
             selection.addRange(range);
-            //
-            _mediumEditor2["default"].selection.select(this.document, element.firstChild, this.word.length);
         }
+        _mediumEditor2["default"].selection.select(this.document, this.activeMentionAt.firstChild, this.word.length);
+        this.activeMentionAt.classList.add(this.activeTriggerClassName);
+        if (this.extraActiveTriggerClassName) {
+            this.activeMentionAt.classList.add(this.extraActiveTriggerClassName);
+        }
     },
@@ -265,0 +339,0 @@

lib/index.min.js

@@ -1,2 +0,2 @@
-!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("MediumEditor"));else if("function"==typeof define&&define.amd)define(["MediumEditor"],e);else{var n=e("object"==typeof exports?require("MediumEditor"):t.MediumEditor);for(var i in n)("object"==typeof exports?exports:t)[i]=n[i]}}(this,function(t){return function(t){function e(i){if(n[i])return n[i].exports;var s=n[i]={exports:{},id:i,loaded:!1};return t[i].call(s.exports,s,s.exports,e),s.loaded=!0,s.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function s(t,e){var n,i,s=t.parentNode;for(o["default"].util.unwrap(t,e),i=s.lastChild;n=i.previousSibling;)3===i.nodeType&&3===n.nodeType&&(n.textContent+=i.textContent,s.removeChild(i)),i=n}Object.defineProperty(e,"__esModule",{value:!0}),e.unwrapForTextNode=s;var a=n(1),o=i(a),r=50;e.atKeyCode=r;var l=51;e.hashKeyCode=l;var d=o["default"].Extension.extend({name:"mention",extraClassName:"",extraActiveClassName:"",tagName:"strong",renderPanelContent:function(){},destroyPanelContent:function(){},activeTriggerList:["@"],triggerClassNameMap:{"#":"medium-editor-mention-hash","@":"medium-editor-mention-at"},hideOnBlurDelay:300,init:function(){this.initMentionPanel(),this.attachEventHandlers()},destroy:function(){this.mentionPanel&&(this.mentionPanel.parentNode&&(this.destroyPanelContent(this.mentionPanel),this.mentionPanel.parentNode.removeChild(this.mentionPanel)),delete this.mentionPanel)},initMentionPanel:function(){var t=this.document.createElement("div");t.classList.add("medium-editor-mention-panel"),this.extraClassName&&t.classList.add(this.extraClassName),this.getEditorOption("elementsContainer").appendChild(t),this.mentionPanel=t},attachEventHandlers:function(){null!=this.hideOnBlurDelay&&(this.subscribe("blur",this.handleBlur.bind(this)),this.subscribe("focus",this.handleFocus.bind(this))),this.subscribe("editableKeyup",this.handleKeyup.bind(this))},handleBlur:function(){null!=this.hideOnBlurDelay&&(this.hideOnBlurDelayId=setTimeout(this.hidePanel.bind(this),this.hideOnBlurDelay))},handleFocus:function(){this.hideOnBlurDelayId&&(clearTimeout(this.hideOnBlurDelayId),this.hideOnBlurDelayId=null)},handleKeyup:function(t){var e=o["default"].util.getKeyCode(t),n=e===o["default"].util.keyCode.SPACE;this.getWordFromSelection(t.target,n?-1:0),!n&&-1!==this.activeTriggerList.indexOf(this.trigger)&&1<this.word.length?this.showPanel():this.hidePanel()},hidePanel:function(){this.mentionPanel.classList.remove("medium-editor-mention-panel-active"),this.extraActiveClassName&&this.mentionPanel.classList.remove(this.extraActiveClassName),this.activeMentionAt&&(this.base.saveSelection(),s(this.activeMentionAt,this.document),this.base.restoreSelection(),this.activeMentionAt=null)},getWordFromSelection:function(t,e){function n(t,e){for(var n=!0;n;){var i=t,s=e;a=void 0,n=!1;var a=l[i-1];if(null==a||0===a.trim().length||0>=i||l.length<i)return i;t=i+s,e=s,n=!0}}var i=o["default"].selection.getSelectionRange(this.document),s=i.startContainer,a=i.startOffset,r=i.endContainer;i.endOffset;if(s===r){var l=s.textContent;this.wordStart=n(a+e,-1),this.wordEnd=n(a+e,1)-1,this.word=l.slice(this.wordStart,this.wordEnd),this.trigger=this.word.slice(0,1),this.triggerClassName=this.triggerClassNameMap[this.trigger]}},showPanel:function(){this.mentionPanel.classList.contains("medium-editor-mention-panel-active")||(this.activatePanel(),this.wrapWordInMentionAt()),this.positionPanel(),this.updatePanelContent()},activatePanel:function(){this.mentionPanel.classList.add("medium-editor-mention-panel-active"),this.extraActiveClassName&&this.mentionPanel.classList.add(this.extraActiveClassName)},wrapWordInMentionAt:function(){var t=this.document.getSelection();if(t.rangeCount){var e=t.getRangeAt(0).cloneRange();e.setStart(e.startContainer,this.wordStart),e.setEnd(e.startContainer,Math.min(this.wordEnd,e.startContainer.textContent.length));var n=this.document.createElement(this.tagName);n.classList.add(this.triggerClassName),this.activeMentionAt=n,e.surroundContents(n),t.removeAllRanges(),t.addRange(e),o["default"].selection.select(this.document,n.firstChild,this.word.length)}},positionPanel:function(){var t=this.activeMentionAt.getBoundingClientRect(),e=t.bottom,n=t.left,i=t.width,s=this.window,a=s.pageXOffset,o=s.pageYOffset;this.mentionPanel.style.top=o+e+"px",this.mentionPanel.style.left=a+n+i+"px"},updatePanelContent:function(){this.renderPanelContent(this.mentionPanel,this.word,this.handleSelectMention.bind(this))},handleSelectMention:function(t){if(t){var e=this.activeMentionAt.firstChild;e.textContent=t,o["default"].selection.select(this.document,e,t.length),this.hidePanel()}else this.hidePanel()}});e.TCMention=d,e["default"]=d},function(e,n){e.exports=t}])});
+!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("MediumEditor"));else if("function"==typeof define&&define.amd)define(["MediumEditor"],e);else{var i=e("object"==typeof exports?require("MediumEditor"):t.MediumEditor);for(var n in i)("object"==typeof exports?exports:t)[n]=i[n]}}(this,function(t){return function(t){function e(n){if(i[n])return i[n].exports;var a=i[n]={exports:{},id:n,loaded:!1};return t[n].call(a.exports,a,a.exports,e),a.loaded=!0,a.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function a(t){return t[t.length-1]}function s(t,e){var i,n,a=t.parentNode;for(o["default"].util.unwrap(t,e),n=a.lastChild;i=n.previousSibling;)3===n.nodeType&&3===i.nodeType&&(i.textContent+=n.textContent,a.removeChild(n)),n=i}Object.defineProperty(e,"__esModule",{value:!0}),e.unwrapForTextNode=s;var r=i(1),o=n(r),l=50;e.atKeyCode=l;var h=51;e.hashKeyCode=h;var d=o["default"].Extension.extend({name:"mention",extraClassName:"",extraActiveClassName:"",extraPanelClassName:"",extraActivePanelClassName:"",extraTriggerClassNameMap:{},extraActiveTriggerClassNameMap:{},tagName:"strong",renderPanelContent:function(){},destroyPanelContent:function(){},activeTriggerList:["@"],triggerClassNameMap:{"#":"medium-editor-mention-hash","@":"medium-editor-mention-at"},activeTriggerClassNameMap:{"#":"medium-editor-mention-hash-active","@":"medium-editor-mention-at-active"},hideOnBlurDelay:300,init:function(){this.initMentionPanel(),this.attachEventHandlers()},destroy:function(){this.mentionPanel&&(this.mentionPanel.parentNode&&(this.destroyPanelContent(this.mentionPanel),this.mentionPanel.parentNode.removeChild(this.mentionPanel)),delete this.mentionPanel)},initMentionPanel:function(){var t=this.document.createElement("div");t.classList.add("medium-editor-mention-panel"),(this.extraPanelClassName||this.extraClassName)&&t.classList.add(this.extraPanelClassName||this.extraClassName),this.getEditorOption("elementsContainer").appendChild(t),this.mentionPanel=t},attachEventHandlers:function(){null!=this.hideOnBlurDelay&&(this.subscribe("blur",this.handleBlur.bind(this)),this.subscribe("focus",this.handleFocus.bind(this))),this.subscribe("editableKeyup",this.handleKeyup.bind(this))},handleBlur:function(){null!=this.hideOnBlurDelay&&(this.hideOnBlurDelayId=setTimeout(this.hidePanel.bind(this),this.hideOnBlurDelay))},handleFocus:function(){this.hideOnBlurDelayId&&(clearTimeout(this.hideOnBlurDelayId),this.hideOnBlurDelayId=null)},handleKeyup:function(t){var e=o["default"].util.getKeyCode(t),i=e===o["default"].util.keyCode.SPACE;this.getWordFromSelection(t.target,i?-1:0),!i&&-1!==this.activeTriggerList.indexOf(this.trigger)&&1<this.word.length?this.showPanel():this.hidePanel()},hidePanel:function(){if(this.mentionPanel.classList.remove("medium-editor-mention-panel-active"),(this.extraActivePanelClassName||this.extraActiveClassName)&&this.mentionPanel.classList.remove(this.extraActivePanelClassName||this.extraActiveClassName),this.activeMentionAt&&(this.activeMentionAt.classList.remove(this.activeTriggerClassName),this.extraActiveTriggerClassName&&this.activeMentionAt.classList.remove(this.extraActiveTriggerClassName)),this.activeMentionAt){var t=this.activeMentionAt,e=t.parentNode,i=t.nextSibling,n=t.firstChild,r=i;i?3!==i.nodeType&&(r=this.document.createTextNode(""),e.insertBefore(r,i)):(r=this.document.createTextNode(""),e.appendChild(r));var l=a(n.textContent),h=0===l.trim().length;h?(n.textContent=n.textContent.substr(0,n.textContent.length-1),r.textContent=""+l+r.textContent):0===r.textContent.length&&1<n.textContent.length&&(r.textContent=" "),o["default"].selection.select(this.document,r,Math.min(r.length,1)),1>=n.textContent.length&&(this.base.saveSelection(),s(this.activeMentionAt,this.document),this.base.restoreSelection()),this.activeMentionAt=null}},getWordFromSelection:function(t,e){function i(t,e){for(var i=!0;i;){var n=t,a=e;i=!1;var s=l[n-1];if(null==s||0===s.trim().length||0>=n||l.length<n)return n;t=n+a,e=a,i=!0,s=void 0}}var n=o["default"].selection.getSelectionRange(this.document),a=n.startContainer,s=n.startOffset,r=n.endContainer;n.endOffset;if(a===r){var l=a.textContent;this.wordStart=i(s+e,-1),this.wordEnd=i(s+e,1)-1,this.word=l.slice(this.wordStart,this.wordEnd),this.trigger=this.word.slice(0,1),this.triggerClassName=this.triggerClassNameMap[this.trigger],this.activeTriggerClassName=this.activeTriggerClassNameMap[this.trigger],this.extraTriggerClassName=this.extraTriggerClassNameMap[this.trigger],this.extraActiveTriggerClassName=this.extraActiveTriggerClassNameMap[this.trigger]}},showPanel:function(){this.mentionPanel.classList.contains("medium-editor-mention-panel-active")||(this.activatePanel(),this.wrapWordInMentionAt()),this.positionPanel(),this.updatePanelContent()},activatePanel:function(){this.mentionPanel.classList.add("medium-editor-mention-panel-active"),(this.extraActivePanelClassName||this.extraActiveClassName)&&this.mentionPanel.classList.add(this.extraActivePanelClassName||this.extraActiveClassName)},wrapWordInMentionAt:function(){var t=this.document.getSelection();if(t.rangeCount){var e=t.getRangeAt(0).cloneRange();if(e.startContainer.parentNode.classList.contains(this.triggerClassName))this.activeMentionAt=e.startContainer.parentNode;else{e.setStart(e.startContainer,this.wordStart),e.setEnd(e.startContainer,Math.min(this.wordEnd,e.startContainer.textContent.length));var i=this.document.createElement(this.tagName);i.classList.add(this.triggerClassName),this.extraTriggerClassName&&i.classList.add(this.extraTriggerClassName),this.activeMentionAt=i,e.surroundContents(i),t.removeAllRanges(),t.addRange(e)}o["default"].selection.select(this.document,this.activeMentionAt.firstChild,this.word.length),this.activeMentionAt.classList.add(this.activeTriggerClassName),this.extraActiveTriggerClassName&&this.activeMentionAt.classList.add(this.extraActiveTriggerClassName)}},positionPanel:function(){var t=this.activeMentionAt.getBoundingClientRect(),e=t.bottom,i=t.left,n=t.width,a=this.window,s=a.pageXOffset,r=a.pageYOffset;this.mentionPanel.style.top=r+e+"px",this.mentionPanel.style.left=s+i+n+"px"},updatePanelContent:function(){this.renderPanelContent(this.mentionPanel,this.word,this.handleSelectMention.bind(this))},handleSelectMention:function(t){if(t){var e=this.activeMentionAt.firstChild;e.textContent=t,o["default"].selection.select(this.document,e,t.length),this.hidePanel()}else this.hidePanel()}});e.TCMention=d,e["default"]=d},function(e,i){e.exports=t}])});
 //# sourceMappingURL=index.min.js.map

package.json

 {
   "name": "medium-editor-tc-mention",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "MediumEditor extension for mention panels like @username or #tagging",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -1,5 +0,5 @@
-# medium-editor-tc-mention [![Travis CI][travis-image]][travis-url] [![Quality][codeclimate-image]][codeclimate-url] [![Coverage][codeclimate-coverage-image]][codeclimate-coverage-url] [![Dependencies][gemnasium-image]][gemnasium-url] [![Gitter][gitter-image]][gitter-url]
+# medium-editor-tc-mention
 > MediumEditor extension for mention panels like @username or #tagging
 
-[![Version][npm-image]][npm-url]
+[![Version][npm-image]][npm-url] [![Travis CI][travis-image]][travis-url] [![Quality][codeclimate-image]][codeclimate-url] [![Coverage][codeclimate-coverage-image]][codeclimate-coverage-url] [![Dependencies][gemnasium-image]][gemnasium-url] [![Gitter][gitter-image]][gitter-url]
 
@@ -6,0 +6,0 @@ <img width="824" alt="screen shot 2015-11-11 at 4 29 30 pm" src="https://cloud.githubusercontent.com/assets/922234/11088093/9b00fe2e-889a-11e5-801d-b6f79c568dde.png">

src/index.js

 import MediumEditor from "medium-editor";
 
+function last (text) {
+    return text[text.length - 1];
+}
+
 export const atKeyCode = 50;
@@ -25,3 +29,4 @@ export const hashKeyCode = 51;
 
-    /* extraClassName: [string]
+    /* @deprecated: use extraPanelClassName. Will remove in next major (3.0.0) release
+     * extraClassName: [string]
      *
@@ -32,3 +37,4 @@ * Extra className to be added with the `medium-editor-mention-panel` element.
 
-    /* extraActiveClassName: [string]
+    /* @deprecated: use extraActivePanelClassName. Will remove in next major (3.0.0) release
+     * extraActiveClassName: [string]
      *
@@ -39,2 +45,18 @@ * Extra active className to be added with the `medium-editor-mention-panel-active` element.
 
+    /* extraPanelClassName: [string]
+     *
+     * Extra className to be added with the `medium-editor-mention-panel` element.
+     */
+    extraPanelClassName: ``,
+
+    /* extraActivePanelClassName: [string]
+     *
+     * Extra active className to be added with the `medium-editor-mention-panel-active` element.
+     */
+    extraActivePanelClassName: ``,
+
+    extraTriggerClassNameMap: {},
+
+    extraActiveTriggerClassNameMap: {},
+
     /* tagName: [string]
@@ -81,2 +103,7 @@ *
 
+    activeTriggerClassNameMap: {
+        "#": `medium-editor-mention-hash-active`,
+        "@": `medium-editor-mention-at-active`,
+    },
+
     hideOnBlurDelay: 300,
@@ -103,4 +130,4 @@
         el.classList.add(`medium-editor-mention-panel`);
-        if (this.extraClassName) {
-          el.classList.add(this.extraClassName);
+        if (this.extraPanelClassName || this.extraClassName) {
+          el.classList.add(this.extraPanelClassName || this.extraClassName);
         }
@@ -151,12 +178,40 @@
         this.mentionPanel.classList.remove(`medium-editor-mention-panel-active`);
-        if (this.extraActiveClassName) {
-            this.mentionPanel.classList.remove(this.extraActiveClassName);
+        if (this.extraActivePanelClassName || this.extraActiveClassName) {
+            this.mentionPanel.classList.remove(this.extraActivePanelClassName || this.extraActiveClassName);
         }
-
         if (this.activeMentionAt) {
-            // LIKE core#execAction
-            this.base.saveSelection();
-            unwrapForTextNode(this.activeMentionAt, this.document);
-            this.base.restoreSelection();
-            // LIKE core#execAction
+            this.activeMentionAt.classList.remove(this.activeTriggerClassName);
+            if (this.extraActiveTriggerClassName) {
+                this.activeMentionAt.classList.remove(this.extraActiveTriggerClassName);
+            }
+        }
+        if (this.activeMentionAt) {
+            // http://stackoverflow.com/a/27004526/1458162
+            const {parentNode, nextSibling, firstChild} = this.activeMentionAt;
+            let textNode = nextSibling;
+            if (!nextSibling) {
+                textNode = this.document.createTextNode(``);
+                parentNode.appendChild(textNode);
+            } else if (3 !== nextSibling.nodeType) {
+                textNode = this.document.createTextNode(``);
+                parentNode.insertBefore(textNode, nextSibling);
+            }
+            const lastEmptyWord = last(firstChild.textContent);
+            const hasLastEmptyWord = 0 === lastEmptyWord.trim().length;
+            if (hasLastEmptyWord) {
+                firstChild.textContent = firstChild.textContent.substr(0, firstChild.textContent.length-1);
+                textNode.textContent = `${ lastEmptyWord }${ textNode.textContent }`;
+            } else {
+                if (0 === textNode.textContent.length && 1 < firstChild.textContent.length) {
+                    textNode.textContent = `\u00A0`;
+                }
+            }
+            MediumEditor.selection.select(this.document, textNode, Math.min(textNode.length, 1));
+            if (1 >= firstChild.textContent.length) {
+                // LIKE core#execAction
+                this.base.saveSelection();
+                unwrapForTextNode(this.activeMentionAt, this.document);
+                this.base.restoreSelection();
+            }
+            //
             this.activeMentionAt = null;
@@ -187,2 +242,6 @@ }
         this.triggerClassName = this.triggerClassNameMap[this.trigger];
+        this.activeTriggerClassName = this.activeTriggerClassNameMap[this.trigger];
+        //
+        this.extraTriggerClassName = this.extraTriggerClassNameMap[this.trigger];
+        this.extraActiveTriggerClassName = this.extraActiveTriggerClassNameMap[this.trigger];
     },
@@ -201,4 +260,4 @@
         this.mentionPanel.classList.add(`medium-editor-mention-panel-active`);
-        if (this.extraActiveClassName) {
-            this.mentionPanel.classList.add(this.extraActiveClassName);
+        if (this.extraActivePanelClassName || this.extraActiveClassName) {
+            this.mentionPanel.classList.add(this.extraActivePanelClassName || this.extraActiveClassName);
         }
@@ -209,5 +268,10 @@ },
         const selection = this.document.getSelection();
-        if (selection.rangeCount) {
-            // http://stackoverflow.com/a/6328906/1458162
-            const range = selection.getRangeAt(0).cloneRange();
+        if (!selection.rangeCount) {
+            return;
+        }
+        // http://stackoverflow.com/a/6328906/1458162
+        const range = selection.getRangeAt(0).cloneRange();
+        if (range.startContainer.parentNode.classList.contains(this.triggerClassName)) {
+            this.activeMentionAt = range.startContainer.parentNode;
+        } else {
             range.setStart(range.startContainer, this.wordStart);
@@ -219,2 +283,5 @@ range.setEnd(range.startContainer, Math.min(this.wordEnd, range.startContainer.textContent.length));
             element.classList.add(this.triggerClassName);
+            if (this.extraTriggerClassName) {
+                element.classList.add(this.extraTriggerClassName);
+            }
             this.activeMentionAt = element;
@@ -225,5 +292,8 @@ //
             selection.addRange(range);
-            //
-            MediumEditor.selection.select(this.document, element.firstChild, this.word.length);
         }
+        MediumEditor.selection.select(this.document, this.activeMentionAt.firstChild, this.word.length);
+        this.activeMentionAt.classList.add(this.activeTriggerClassName);
+        if (this.extraActiveTriggerClassName) {
+            this.activeMentionAt.classList.add(this.extraActiveTriggerClassName);
+        }
     },
@@ -230,0 +300,0 @@

No alert changes

Improved metrics

Total package byte prevSize

86002

increased by27.11%

Lines of code

636

increased by28.23%

No dependency changes