Moving the formatting buttons to a plugin.

available_plugins/ep_formatting/ep.json

@@ -0,0 +1,13 @@
+{
+  "parts": [
+    {
+      "name": "basic-formatting",
+      "client_hooks": {
+        "postAceInit": "ep_formatting/static/js/toolbarButtons:postAceInit"
+      },
+      "hooks": {
+        "eejsBlock_editbarMenuLeft": "ep_formatting/plugin:eejsBlock_editbarMenuLeft"
+      }
+    }
+  ]
+}

available_plugins/ep_formatting/package.json

@@ -0,0 +1,10 @@
+{
+  "author": "cohitre <smiles@cohitre.com> (http://cohitre.com)",
+  "name": "ep_formatting",
+  "description": "Show basic formatting options in the etherpad-lite toolbar.",
+  "version": "0.0.1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Pita/etherpad-lite"
+  }
+}

available_plugins/ep_formatting/plugin.js

@@ -0,0 +1,6 @@
+var eejs = require('ep_etherpad-lite/node/eejs/');
+
+exports.eejsBlock_editbarMenuLeft = function (hook_name, args, cb) {
+  args.content = args.content + eejs.require("ep_formatting/templates/buttons.ejs");
+  return cb();
+}

available_plugins/ep_formatting/static/js/toolbarButtons.js

@@ -0,0 +1,58 @@
+var _ = require('ep_etherpad-lite/static/js/underscore')
+  , padeditor = require('ep_etherpad-lite/static/js/pad_editor').padeditor
+  , padeditbar = require('ep_etherpad-lite/static/js/pad_editbar').padeditbar
+  , simpleCommands = ["bold", "italic", "underline", "strikethrough"];
+
+function  registerCallWithAceCommand(commandName, callback) {
+  padeditbar.registerToolbarCommand(commandName, function () {
+    padeditor.ace.callWithAce(callback, commandName, true);
+  });
+}
+
+exports.postAceInit = function () {
+  _.each(simpleCommands, function (commandName) {
+    registerCallWithAceCommand(commandName, function (ace) {
+      ace.ace_toggleAttributeOnSelection(commandName)
+    });
+  });
+
+  _.each(["undo", "redo"], function (commandName) {
+    registerCallWithAceCommand(commandName, function (ace) {
+      ace.ace_doUndoRedo(commandName);
+    });
+  });
+
+  registerCallWithAceCommand('insertunorderedlist', function (ace) {
+    ace.ace_doInsertUnorderedList();
+  });
+
+  registerCallWithAceCommand("insertorderedlist", function (ace) {
+    ace.ace_doInsertOrderedList();
+  });
+
+  registerCallWithAceCommand("indent", function (ace) {
+    if (!ace.ace_doIndentOutdent(false)) {
+      ace.ace_doInsertUnorderedList();
+    }
+  });
+
+  registerCallWithAceCommand("outdent", function (ace) {
+    ace.ace_doIndentOutdent(true);
+  });
+
+  registerCallWithAceCommand("clearauthorship", function (ace) {
+    if ((!(ace.ace_getRep().selStart && ace.ace_getRep().selEnd)) || ace.ace_isCaret())
+    {
+      if (window.confirm("Clear authorship colors on entire document?"))
+      {
+        ace.ace_performDocumentApplyAttributesToCharRange(0, ace.ace_getRep().alltext.length, [
+          ['author', '']
+        ]);
+      }
+    }
+    else
+    {
+      ace.ace_setAttributeOnSelection('author', '');
+    }
+  });
+};

available_plugins/ep_formatting/templates/buttons.ejs

@@ -0,0 +1,58 @@
+<li class="acl-write" id="bold" data-key="bold">
+    <a class="grouped-left" title="Bold (ctrl-B)">
+      <span class="buttonicon buttonicon-bold"></span>
+    </a>
+</li>
+<li class="acl-write" id="italic" data-key="italic">
+    <a class="grouped-middle" title="Italics (ctrl-I)">
+      <span class="buttonicon buttonicon-italic"></span>
+    </a>
+</li>
+<li class="acl-write" id="underline" data-key="underline">
+    <a class="grouped-middle" title="Underline (ctrl-U)">
+      <span class="buttonicon buttonicon-underline"></span>
+    </a>
+</li>
+<li class="acl-write" id="strikethrough" data-key="strikethrough">
+    <a class="grouped-right" title="Strikethrough">
+      <span class="buttonicon buttonicon-strikethrough"></span>
+    </a>
+</li>
+<li class="acl-write separator"></li>
+<li class="acl-write" id="oderedlist" data-key="insertorderedlist">
+    <a class="grouped-left" title="Toggle Ordered List">
+      <span class="buttonicon buttonicon-insertorderedlist"></span>
+    </a>
+</li>
+<li class="acl-write" id="unoderedlist" data-key="insertunorderedlist">
+    <a class="grouped-middle" title="Toggle Bullet List">
+      <span class="buttonicon buttonicon-insertunorderedlist"></span>
+    </a>
+</li>
+<li class="acl-write" id="indent" data-key="indent">
+    <a class="grouped-middle" title="Indent">
+      <span class="buttonicon buttonicon-indent"></span>
+    </a>
+</li>
+<li class="acl-write" id="outdent" data-key="outdent">
+    <a class="grouped-right" title="Unindent">
+      <span class="buttonicon buttonicon-outdent"></span>
+    </a>
+</li>
+<li class="acl-write separator"></li>
+<li class="acl-write" id="undo" data-key="undo">
+    <a class="grouped-left" title="Undo (ctrl-Z)">
+      <span class="buttonicon buttonicon-undo"></span>
+    </a>
+</li>
+<li class="acl-write" id="redo" data-key="redo">
+    <a class="grouped-right" title="Redo (ctrl-Y)">
+      <span class="buttonicon buttonicon-redo"></span>
+    </a>
+</li>
+<li class="acl-write separator"></li>
+<li class="acl-write" id="clearAuthorship" data-key="clearauthorship">
+    <a title="Clear Authorship Colors">
+      <span class="buttonicon buttonicon-clearauthorship"></span>
+    </a>
+</li>

src/static/js/pad_editbar.js

@@ -1,5 +1,5 @@
 /**
- * This code is mostly from the old Etherpad. Please help us to comment this code. 
+ * This code is mostly from the old Etherpad. Please help us to comment this code.
  * This helps other people to understand this code better and helps them to improve it.
  * TL;DR COMMENTS ON THIS FILE ARE HIGHLY APPRECIATED
  */
@@ -116,8 +116,25 @@ var padeditbar = (function()
     {
       $("#editbar").addClass('disabledtoolbar').removeClass("enabledtoolbar");
     },
+    hasToolbarCommand: function (commandName) {
+      return this.toolbarCommands && this.toolbarCommands[commandName] !== undefined;
+    },
+    registerToolbarCommand: function (commandName, method) {
+      this.toolbarCommands = this.toolbarCommands || {};
+      this.toolbarCommands[commandName] = method;
+      return this;
+    },
+    executeToolbarCommand: function (commandName) {
+      var args = Array.prototype.slice.call(arguments, 1);
+
+      if (this.hasToolbarCommand(commandName)) {
+        this.toolbarCommands[commandName].apply(this, args);
+      }
+
+      return this;
+    },
     toolbarClick: function(cmd)
-    {  
+    {
       if (self.isEnabled())
       {
         if(cmd == "showusers")
@@ -136,48 +153,14 @@ var padeditbar = (function()
         }
         else if (cmd == 'import_export')
         {
-	      self.toogleDropDown("importexport");
+          self.toogleDropDown("importexport");
         }
         else if (cmd == 'savedRevision')
         {
           padsavedrevs.saveNow();
         }
-        else
+        else if (self.hasToolbarCommand(cmd)) {
-        {
+          self.executeToolbarCommand(cmd);
-          padeditor.ace.callWithAce(function(ace)
-          {
-            if (cmd == 'bold' || cmd == 'italic' || cmd == 'underline' || cmd == 'strikethrough') ace.ace_toggleAttributeOnSelection(cmd);
-            else if (cmd == 'undo' || cmd == 'redo') ace.ace_doUndoRedo(cmd);
-            else if (cmd == 'insertunorderedlist') ace.ace_doInsertUnorderedList();
-            else if (cmd == 'insertorderedlist') ace.ace_doInsertOrderedList();
-            else if (cmd == 'indent')
-            {
-              if (!ace.ace_doIndentOutdent(false))
-              {
-                ace.ace_doInsertUnorderedList();
-              }
-            }
-            else if (cmd == 'outdent')
-            {
-              ace.ace_doIndentOutdent(true);
-            }
-            else if (cmd == 'clearauthorship')
-            {
-              if ((!(ace.ace_getRep().selStart && ace.ace_getRep().selEnd)) || ace.ace_isCaret())
-              {
-                if (window.confirm("Clear authorship colors on entire document?"))
-                {
-                  ace.ace_performDocumentApplyAttributesToCharRange(0, ace.ace_getRep().alltext.length, [
-                    ['author', '']
-                  ]);
-                }
-              }
-              else
-              {
-                ace.ace_setAttributeOnSelection('author', '');
-              }
-            }
-          }, cmd, true);
         }
       }
       if(padeditor.ace) padeditor.ace.focus();
@@ -185,7 +168,7 @@ var padeditbar = (function()
     toogleDropDown: function(moduleName)
     {
       var modules = ["settings", "importexport", "embed", "users"];
-      
+
       // hide all modules and remove highlighting of all buttons
       if(moduleName == "none")
       {
@@ -194,9 +177,9 @@ var padeditbar = (function()
           //skip the userlist
           if(modules[i] == "users")
             continue;
-          
+
           var module = $("#" + modules[i]);
-        
+
           if(module.css('display') != "none")
           {
             $("#" + modules[i] + "link").removeClass("selected");
@@ -204,14 +187,14 @@ var padeditbar = (function()
           }
         }
       }
-      else 
+      else
       {
         // hide all modules that are not selected and remove highlighting
         // respectively add highlighting to the corresponding button
         for(var i=0;i<modules.length;i++)
         {
           var module = $("#" + modules[i]);
-        
+
           if(module.css('display') != "none")
           {
             $("#" + modules[i] + "link").removeClass("selected");

src/templates/pad.html

@@ -24,64 +24,6 @@
         <div id="editbar" class="toolbar">
             <ul class="menu_left">
                 <% e.begin_block("editbarMenuLeft"); %>
-                <li class="acl-write" id="bold" data-key="bold">
-                    <a class="grouped-left" title="Bold (ctrl-B)">
-                      <span class="buttonicon buttonicon-bold"></span>
-                    </a>
-                </li>
-                <li class="acl-write" id="italic" data-key="italic">
-                    <a class="grouped-middle" title="Italics (ctrl-I)">
-                      <span class="buttonicon buttonicon-italic"></span>
-                    </a>
-                </li>
-                <li class="acl-write" id="underline" data-key="underline">
-                    <a class="grouped-middle" title="Underline (ctrl-U)">
-                      <span class="buttonicon buttonicon-underline"></span>
-                    </a>
-                </li>
-                <li class="acl-write" id="strikethrough" data-key="strikethrough">
-                    <a class="grouped-right" title="Strikethrough">
-                      <span class="buttonicon buttonicon-strikethrough"></span>
-                    </a>
-                </li>
-                <li class="acl-write separator"></li>
-                <li class="acl-write" id="oderedlist" data-key="insertorderedlist">
-                    <a class="grouped-left" title="Toggle Ordered List">
-                      <span class="buttonicon buttonicon-insertorderedlist"></span>
-                    </a>
-                </li>
-                <li class="acl-write" id="unoderedlist" data-key="insertunorderedlist">
-                    <a class="grouped-middle" title="Toggle Bullet List">
-                      <span class="buttonicon buttonicon-insertunorderedlist"></span>
-                    </a>
-                </li>
-                <li class="acl-write" id="indent" data-key="indent">
-                    <a class="grouped-middle" title="Indent">
-                      <span class="buttonicon buttonicon-indent"></span>
-                    </a>
-                </li>
-                <li class="acl-write" id="outdent" data-key="outdent">
-                    <a class="grouped-right" title="Unindent">
-                      <span class="buttonicon buttonicon-outdent"></span>
-                    </a>
-                </li>
-                <li class="acl-write separator"></li>
-                <li class="acl-write" id="undo" data-key="undo">
-                    <a class="grouped-left" title="Undo (ctrl-Z)">
-                      <span class="buttonicon buttonicon-undo"></span>
-                    </a>
-                </li>
-                <li class="acl-write" id="redo" data-key="redo">
-                    <a class="grouped-right" title="Redo (ctrl-Y)">
-                      <span class="buttonicon buttonicon-redo"></span>
-                    </a>
-                </li>
-                <li class="acl-write separator"></li>
-                <li class="acl-write" id="clearAuthorship" data-key="clearauthorship">
-                    <a title="Clear Authorship Colors">
-                      <span class="buttonicon buttonicon-clearauthorship"></span>
-                    </a>
-                </li>
                 <% e.end_block(); %>
             </ul>
             <ul class="menu_right">
@@ -326,13 +268,13 @@
         <script type="text/javascript">
             var clientVars = {};
             (function () {
-              
+
-              
+
               var pathComponents = location.pathname.split('/');
-              
+
               // Strip 'p' and the padname from the pathname and set as baseURL
               var baseURL = pathComponents.slice(0,pathComponents.length-2).join('/') + '/';
-                            
+
               require.setRootURI(baseURL + "javascripts/src");
               require.setLibraryURI(baseURL + "javascripts/lib");
               require.setGlobalKeyPath("require");