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
Voog · Nov 10, 2015 · 230011f · 230011f
1 parent 563cb4d
commit 230011f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git 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
@@ -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");