ADD: inline code command for code button #325

xinghunMeng · Nov 18, 2015 · 5748c9b · 5748c9b
1 parent 09f81d5
commit 5748c9b
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 2 deletions.
diff --git a/lib/simditor.js b/lib/simditor.js
@@ -1,7 +1,7 @@
 /*!
 * Simditor v2.3.4
 * http://simditor.tower.im/
-* 2015-11-18
+* 2015-11-19
 */
 (function (root, factory) {
   if (typeof define === 'function' && define.amd) {
@@ -3791,8 +3791,24 @@ CodeButton = (function(superClass) {
     });
   };
 
+  CodeButton.prototype._checkMode = function() {
+    var $blockNodes, range;
+    range = this.editor.selection.range();
+    if (($blockNodes = $(range.cloneContents()).find(this.editor.util.blockNodes.join(','))) > 0 || (range.collapsed && this.editor.selection.startNodes().filter('code').length === 0)) {
+      this.inlineMode = false;
+      return this.htmlTag = 'pre';
+    } else {
+      this.inlineMode = true;
+      return this.htmlTag = 'code';
+    }
+  };
+
   CodeButton.prototype._status = function() {
+    this._checkMode();
     CodeButton.__super__._status.call(this);
+    if (this.inlineMode) {
+      return;
+    }
     if (this.active) {
       return this.popover.show(this.node);
     } else {
@@ -3823,6 +3839,14 @@ CodeButton = (function(superClass) {
   };
 
   CodeButton.prototype.command = function() {
+    if (this.inlineMode) {
+      return this._inlineCommand();
+    } else {
+      return this._blockCommand();
+    }
+  };
+
+  CodeButton.prototype._blockCommand = function() {
     var $rootNodes, clearCache, nodeCache, resultNodes;
     $rootNodes = this.editor.selection.rootNodes();
     nodeCache = [];
@@ -3858,6 +3882,24 @@ CodeButton = (function(superClass) {
     return this.editor.trigger('valuechanged');
   };
 
+  CodeButton.prototype._inlineCommand = function() {
+    var $code, $contents, range;
+    range = this.editor.selection.range();
+    if (this.active) {
+      range.selectNodeContents(this.node[0]);
+      this.editor.selection.save(range);
+      this.node.contents().unwrap();
+      this.editor.selection.restore();
+    } else {
+      $contents = $(range.extractContents());
+      $code = $("<" + this.htmlTag + "/>").append($contents.contents());
+      range.insertNode($code[0]);
+      range.selectNodeContents($code[0]);
+      this.editor.selection.range(range);
+    }
+    return this.editor.trigger('valuechanged');
+  };
+
   return CodeButton;
 
 })(Button);

diff --git a/site/assets/scripts/simditor.js b/site/assets/scripts/simditor.js
@@ -3786,8 +3786,24 @@ CodeButton = (function(superClass) {
     });
   };
 
+  CodeButton.prototype._checkMode = function() {
+    var $blockNodes, range;
+    range = this.editor.selection.range();
+    if (($blockNodes = $(range.cloneContents()).find(this.editor.util.blockNodes.join(','))) > 0 || (range.collapsed && this.editor.selection.startNodes().filter('code').length === 0)) {
+      this.inlineMode = false;
+      return this.htmlTag = 'pre';
+    } else {
+      this.inlineMode = true;
+      return this.htmlTag = 'code';
+    }
+  };
+
   CodeButton.prototype._status = function() {
+    this._checkMode();
     CodeButton.__super__._status.call(this);
+    if (this.inlineMode) {
+      return;
+    }
     if (this.active) {
       return this.popover.show(this.node);
     } else {
@@ -3818,6 +3834,14 @@ CodeButton = (function(superClass) {
   };
 
   CodeButton.prototype.command = function() {
+    if (this.inlineMode) {
+      return this._inlineCommand();
+    } else {
+      return this._blockCommand();
+    }
+  };
+
+  CodeButton.prototype._blockCommand = function() {
     var $rootNodes, clearCache, nodeCache, resultNodes;
     $rootNodes = this.editor.selection.rootNodes();
     nodeCache = [];
@@ -3853,6 +3877,24 @@ CodeButton = (function(superClass) {
     return this.editor.trigger('valuechanged');
   };
 
+  CodeButton.prototype._inlineCommand = function() {
+    var $code, $contents, range;
+    range = this.editor.selection.range();
+    if (this.active) {
+      range.selectNodeContents(this.node[0]);
+      this.editor.selection.save(range);
+      this.node.contents().unwrap();
+      this.editor.selection.restore();
+    } else {
+      $contents = $(range.extractContents());
+      $code = $("<" + this.htmlTag + "/>").append($contents.contents());
+      range.insertNode($code[0]);
+      range.selectNodeContents($code[0]);
+      this.editor.selection.range(range);
+    }
+    return this.editor.trigger('valuechanged');
+  };
+
   return CodeButton;
 
 })(Button);

diff --git a/src/buttons/code.coffee b/src/buttons/code.coffee
@@ -25,9 +25,22 @@ class CodeButton extends Button
     @popover = new CodePopover
       button: @
 
+  _checkMode: ->
+    range = @editor.selection.range()
+
+    if ($blockNodes = $(range.cloneContents()).find(@editor.util.blockNodes.join(','))) > 0 or
+        (range.collapsed and @editor.selection.startNodes().filter('code').length == 0)
+      @inlineMode = false
+      @htmlTag = 'pre'
+    else
+      @inlineMode = true
+      @htmlTag = 'code'
+
   _status: ->
+    @_checkMode()
     super()
 
+    return if @inlineMode
     if @active
       @popover.show(@node)
     else
@@ -48,6 +61,12 @@ class CodeButton extends Button
       .removeAttr('data-lang')
 
   command: ->
+    if @inlineMode
+      @_inlineCommand()
+    else
+      @_blockCommand()
+
+  _blockCommand: ->
     $rootNodes = @editor.selection.rootNodes()
     nodeCache = []
     resultNodes = []
@@ -78,6 +97,25 @@ class CodeButton extends Button
     @editor.selection.setRangeAtEndOf $(resultNodes).last()
     @editor.trigger 'valuechanged'
 
+  _inlineCommand: ->
+    range = @editor.selection.range()
+
+    if @active
+      range.selectNodeContents @node[0]
+      @editor.selection.save range
+      @node.contents().unwrap()
+      @editor.selection.restore()
+    else
+      $contents = $ range.extractContents()
+      $code = $ "<#{@htmlTag}/>"
+        .append $contents.contents()
+      range.insertNode $code[0]
+      range.selectNodeContents $code[0]
+      @editor.selection.range range
+
+    @editor.trigger 'valuechanged'
+
+
 
 class CodePopover extends Popover
 

diff --git a/styles/simditor.css b/styles/simditor.css
@@ -1,7 +1,7 @@
 /*!
 * Simditor v2.3.4
 * http://simditor.tower.im/
-* 2015-11-18
+* 2015-11-19
 */
 @font-face {
   font-family: 'Simditor';