From 0b6a64ef9310b6896f4b5c58cc674fbb67104527 Mon Sep 17 00:00:00 2001
From: Tom Chen <developer@tomchentw.com>
Date: Tue, 24 Nov 2015 17:22:52 +0800
Subject: [PATCH] feat(TCMention): add extra className map for trigger
---
src/index.js | 16 ++++++++++++++++
1 file changed, 16 insertions(+)
diff --git a/src/index.js b/src/index.js
index 414683e..80a48cf 100644
--- a/src/index.js
+++ b/src/index.js
@@ -52,6 +52,10 @@ export const TCMention = MediumEditor.Extension.extend({
*/
extraActivePanelClassName: ``,
+ extraTriggerClassNameMap: {},
+
+ extraActiveTriggerClassNameMap: {},
+
/* tagName: [string]
*
* Element tag name that would indicate that this mention. It will have
@@ -171,6 +175,9 @@ export const TCMention = MediumEditor.Extension.extend({
}
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
@@ -227,6 +234,9 @@ export const TCMention = MediumEditor.Extension.extend({
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 () {
@@ -261,6 +271,9 @@ export const TCMention = MediumEditor.Extension.extend({
// TODO: Not sure why, but using <span> tag doens't work here
const element = this.document.createElement(this.tagName);
element.classList.add(this.triggerClassName);
+ if (this.extraTriggerClassName) {
+ element.classList.add(this.extraTriggerClassName);
+ }
this.activeMentionAt = element;
//
range.surroundContents(element);
@@ -269,6 +282,9 @@ export const TCMention = MediumEditor.Extension.extend({
}
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);
+ }
},
positionPanel () {