Change the way that headings are applied to elements so that they no longer destroy the parent element by replacing the original tag.

css/editor.css

@@ -28,6 +28,21 @@ body {
   font-size: 2em;
 }
 
+.g-body .h1 {
+  font-weight: bold;
+  font-size: 2em;
+}
+
+.g-body .h2 {
+  font-weight: bold;
+  font-size: 1.5em;
+}
+
+.g-body .h3 {
+  font-weight: bold;
+  font-size: 1.17em;
+}
+
 .g-body header {
   font-weight: bold;
   font-size: 52px;

css/menu.css

@@ -62,7 +62,7 @@
   margin-top: -28px;
   z-index: 1000;
   padding: 5px 4px 5px 5px;
-  width: 176px;
+  width: 205px;
   height: 33px;
 
   -webkit-transition: all 300ms ease-in-out;
@@ -78,6 +78,7 @@
 
 .options.url-mode .header1,
 .options.url-mode .header2,
+.options.url-mode .header3,
 .options.url-mode .bold,
 .options.url-mode .italic,
 .options.url-mode .quote,

index.html

@@ -19,6 +19,7 @@
             <button class="italic">i</button>
             <button class="header1">h1</button>
             <button class="header2">h2</button>
+            <button class="header3">h3</button>
             <button class="quote">&rdquo;</button>
             <button class="url useicons">&#xe001;</button>
             <input class="url-input" type="text" placeholder="Paste or type a link"/>

js/grande.js

@@ -24,6 +24,7 @@
         "i": "italic",
         "h1": "header1",
         "h2": "header2",
+        "h3": "header3",
         "a": "url",
         "blockquote": "quote"
       };
@@ -85,6 +86,7 @@
   function reloadMenuState() {
     var className,
         focusNode = getFocusNode(),
+        elemClass = focusNode.parentNode.className,
         tagClass,
         reTag;
 
@@ -96,7 +98,7 @@
         reTag = new RegExp(tagClass);
 
         if (reTag.test(className)) {
-          if (hasParentWithTag(focusNode, tag)) {
+          if (hasParentWithTag(focusNode, tag) || elemClass.match(tag)) {
             node.className = tagClass + " active";
           } else {
             node.className = tagClass;
@@ -192,14 +194,14 @@
           case "i":
             document.execCommand(tagClass, false);
             return;
-
           case "h1":
           case "h2":
           case "h3":
+            toggleFormatHeading(tag);
+            return;
           case "blockquote":
             toggleFormatBlock(tag);
             return;
-
           case "a":
             toggleUrlInput();
             optionsNode.className = "options url-mode";
@@ -250,6 +252,17 @@
     }
   }
 
+  function toggleFormatHeading(tag) {
+    node = getFocusNode().parentNode;
+    if (node.className.match(tag)) {
+      node.className = node.className.replace(new RegExp('\\b' + tag + '\\b'), '').trim();
+    } else {
+      // Remove existing class and trim
+      node.className = node.className.replace(new RegExp('\\b(h1|h2|h3)\\b'), '').trim();
+      node.className += ' ' + tag;
+    }
+  }
+
   function toggleUrlInput() {
     setTimeout(function() {
       var url = getParentHref(getFocusNode());