From 230011ffb4c70f19e4bc9f8a0b15f4d69c601c18 Mon Sep 17 00:00:00 2001
From: Oliver Pulges <oliver@fraktal.ee>
Date: Tue, 10 Nov 2015 11:28:07 +0200
Subject: [PATCH] Fixes #247 - Setting a color, font name etc. keeps adding
 classes. Fixes #189 - changing/applying new font family using formatInline -
 does not remove old class, it just adds a new one

---
 src/commands/formatInline.js       |  3 +++
 test/commands/formatInline_test.js | 10 ++++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/commands/formatInline.js b/src/commands/formatInline.js
index 4b4e474..1768a0b 100644
--- a/src/commands/formatInline.js
+++ b/src/commands/formatInline.js
@@ -143,6 +143,9 @@
       if (options.toggle !== false && element.classList.contains(options.className)) {
         element.classList.remove(options.className);
       } else {
+        if (options.classRegExp) {
+          element.className = element.className.replace(options.classRegExp, '');
+        }
         element.classList.add(options.className);
       }
       if (hasNoClass(element)) {
diff --git a/test/commands/formatInline_test.js b/test/commands/formatInline_test.js
index ac5b137..ed1ef16 100644
--- a/test/commands/formatInline_test.js
+++ b/test/commands/formatInline_test.js
@@ -43,7 +43,7 @@ if (wysihtml5.browser.supported()) {
   });
 
   asyncTest("Format inline", function() {
-    expect(30);
+    expect(32);
     var that = this,
         parserRules = {
           "classes": "any",
@@ -154,7 +154,13 @@ if (wysihtml5.browser.supported()) {
       that.equal(('<a href="http://www.google.com" target="_self"></a>'), editableElement.innerHTML.toLowerCase().replace(/\uFEFF/g, '').replace(/<br\/?>/gi, ''), "FormatInline given different attribute at first changes to new attribute");
       editor.composer.commands.exec("formatInline", {nodeName: "a", attribute : {"href": "http://www.google.com", "target": "_self"}});
       equal(!!editableElement.querySelector('a'), false, "Previous Insert is toggleable");
-     
+
+      blankSelectionStart(editor);
+      editor.composer.commands.exec("formatInline", { className: "color-red", classRegExp: /^color-[0-9a-z]+/});
+      that.equal(('<span class="color-red">test this text</span>'), editableElement.innerHTML.toLowerCase().replace(/\uFEFF/g, '').replace(/<br\/?>/gi, ''), "Classname color-red added");
+      editor.composer.commands.exec("formatInline", { className: "color-blue", classRegExp: /^color-[0-9a-z]+/});
+      that.equal(('<span class="color-blue">test this text</span>'), editableElement.innerHTML.toLowerCase().replace(/\uFEFF/g, '').replace(/<br\/?>/gi, ''), "Classname regex mathing classname changed to color-blue");
+
       blankSelectionStart(editor);
       editor.composer.commands.exec("formatInline", "strong");
       editor.composer.commands.exec("formatInline", "b");