Update class tag to be editable

src/class_manager/template/classTag.html

@@ -1,3 +1,5 @@
 <span id="<%= pfx %>checkbox" class="fa"></span>
- <span id="<%= pfx %>tag-label"><%= label %></span>
+ <span id="<%= pfx %>tag-label">
+    <input class="<%= ppfx %>no-app" value="<%= label %>" <%= inputProp %>/>
+  </span>
 <span id="<%= pfx %>close">&Cross;</span>

src/class_manager/view/ClassTagView.js

@@ -13,6 +13,8 @@ define(['backbone', 'text!./../template/classTag.html'],
       this.config = o.config || {};
       this.coll = o.coll || null;
       this.pfx = this.config.stylePrefix || '';
+      this.ppfx = this.config.pStylePrefix || '';
+      this.inputProp = 'readonly';
       this.target = this.config.target;
       this.className = this.pfx + 'tag';
       this.closeId = this.pfx + 'close';
@@ -20,13 +22,33 @@ define(['backbone', 'text!./../template/classTag.html'],
       this.labelId = this.pfx + 'tag-label';
       this.events['click #' + this.closeId ] = 'removeTag';
       this.events['click #' + this.chkId ] = 'changeStatus';
-      this.events['click #' + this.labelId ] = 'changeStatus';
+      this.events['dblclick #' + this.labelId ] = 'startEditTag';
+      this.events['keypress #' + this.labelId + ' input'] = 'updateInputLabel';
+      this.events['blur #' + this.labelId + ' input'] = 'endEditTag';
 
       this.listenTo( this.model, 'change:active', this.updateStatus);
+      //this.listenTo( this.model, 'change:label', this.updateStatus);
 
       this.delegateEvents();
     },
 
+    /**
+     * Start editing tag
+     */
+    startEditTag: function(){
+      this.$labelInput.prop(this.inputProp, false);
+    },
+
+    /**
+     * End editing tag
+     */
+    endEditTag: function(){
+      this.$labelInput.prop(this.inputProp, true);
+    },
+
+    /**
+     * Update status of the tag
+     */
     changeStatus: function(){
       this.model.set('active', !this.model.get('active'));
       this.target.trigger('targetClassUpdated');
@@ -66,14 +88,28 @@ define(['backbone', 'text!./../template/classTag.html'],
       }
     },
 
+    /**
+     * Update label's input
+     */
+    updateInputLabel: function(){
+      if(!this.$labelInput)
+        this.$labelInput = this.$el.find('input');
+      var size = this.$labelInput.val().length - 2;
+      size = size < 1 ? 1 : size;
+      this.$labelInput.attr('size', size);
+    },
+
     /** @inheritdoc */
     render : function(){
       this.$el.html( this.template({
         label: this.model.get('label'),
         pfx: this.pfx,
+        ppfx: this.ppfx,
+        inputProp: this.inputProp,
       }));
       this.updateStatus();
       this.$el.attr('class', this.className);
+      this.updateInputLabel();
       return this;
     },
 

src/editor/model/Editor.js

@@ -153,6 +153,7 @@ define([
 			initClassManager: function() {
 				var cfg = this.config.classManager,
 				pfx	= cfg.stylePrefix || 'clm-';
+				cfg.pStylePrefix = this.config.stylePrefix;
 				cfg.stylePrefix	= this.config.stylePrefix + pfx;
 				cfg.target = this;
 				this.clm = new ClassManager(cfg);

styles/css/main.css

@@ -2561,9 +2561,13 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 /*#383838*/
 /*#515151*/
 /*l: #d8d7db*/
-.wte-invis-invis, .wte-clm-tags #wte-clm-new {
+.wte-invis-invis, .wte-clm-tags #wte-clm-new, .wte-no-app {
   background-color: transparent;
-  border: none; }
+  border: none;
+  color: inherit; }
+
+.wte-no-app {
+  height: 10px; }
 
 .wte-test::btn {
   color: '#fff'; }
@@ -3282,7 +3286,7 @@ ol.example li.placeholder:before {
     cursor: pointer;
     font-size: 9px; }
   .wte-clm-tags #wte-clm-tag-label {
-    cursor: pointer; }
+    cursor: text; }
 
 /********* END Class manager **********/
 /********* Modal dialog **********/

styles/scss/main.scss

@@ -47,9 +47,13 @@ $imageCompDim:	50px;
 	appearance: $v;
 }
 
-.#{$app-prefix}invis-invis{
+.#{$app-prefix}invis-invis, .#{$app-prefix}no-app{
 	background-color: transparent;
 	border: none;
+	color:inherit;
+}
+.#{$app-prefix}no-app{
+	height: 10px;
 }
 
 .#{$app-prefix}test {
@@ -840,7 +844,7 @@ $tagBg: #804f7b;
 	}
 
 	##{$clm-prefix}tag-label {
-		cursor: pointer;
+		cursor: text;
 		@extend  .no-select;
 	}
 }