From d6c4c236a30aca4616544632dd058eac155bdbcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Wed, 14 Nov 2018 10:05:34 +0100
Subject: [PATCH] change isActive behavior

---
 examples/Components/Routes/Basic/index.vue    | 26 +++++++++----------
 examples/Components/Routes/Export/index.vue   | 20 +++++++-------
 .../Components/Routes/FloatingMenu/index.vue  | 14 +++++-----
 .../Components/Routes/HidingMenuBar/index.vue | 26 +++++++++----------
 examples/Components/Routes/Links/index.vue    |  2 +-
 .../Components/Routes/MenuBubble/index.vue    |  6 ++---
 examples/Components/Routes/TodoList/index.vue |  8 +++---
 .../src/Components/EditorFloatingMenu.js      |  2 +-
 .../tiptap/src/Components/EditorMenuBar.js    |  2 +-
 .../tiptap/src/Components/EditorMenuBubble.js |  2 +-
 packages/tiptap/src/utils/Editor.js           | 12 +++++----
 11 files changed, 61 insertions(+), 59 deletions(-)

diff --git a/examples/Components/Routes/Basic/index.vue b/examples/Components/Routes/Basic/index.vue
index 0e9c0006..5d6a2e15 100644
--- a/examples/Components/Routes/Basic/index.vue
+++ b/examples/Components/Routes/Basic/index.vue
@@ -5,7 +5,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('bold') }"
+          :class="{ 'is-active': isActive.bold() }"
           @click="commands.bold"
         >
           <icon name="bold" />
@@ -13,7 +13,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('italic') }"
+          :class="{ 'is-active': isActive.italic() }"
           @click="commands.italic"
         >
           <icon name="italic" />
@@ -21,7 +21,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('strike') }"
+          :class="{ 'is-active': isActive.strike() }"
           @click="commands.strike"
         >
           <icon name="strike" />
@@ -29,7 +29,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('underline') }"
+          :class="{ 'is-active': isActive.underline() }"
           @click="commands.underline"
         >
           <icon name="underline" />
@@ -37,7 +37,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('code') }"
+          :class="{ 'is-active': isActive.code() }"
           @click="commands.code"
         >
           <icon name="code" />
@@ -45,7 +45,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('paragraph') }"
+          :class="{ 'is-active': isActive.paragraph() }"
           @click="commands.paragraph"
         >
           <icon name="paragraph" />
@@ -53,7 +53,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('heading', { level: 1 }) }"
+          :class="{ 'is-active': isActive.heading({ level: 1 }) }"
           @click="commands.heading({ level: 1 })"
         >
           H1
@@ -61,7 +61,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('heading', { level: 2 }) }"
+          :class="{ 'is-active': isActive.heading({ level: 2 }) }"
           @click="commands.heading({ level: 2 })"
         >
           H2
@@ -69,7 +69,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('heading', { level: 3 }) }"
+          :class="{ 'is-active': isActive.heading({ level: 3 }) }"
           @click="commands.heading({ level: 3 })"
         >
           H3
@@ -77,7 +77,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('bullet_list') }"
+          :class="{ 'is-active': isActive.bullet_list() }"
           @click="commands.bullet_list"
         >
           <icon name="ul" />
@@ -85,7 +85,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('ordered_list') }"
+          :class="{ 'is-active': isActive.ordered_list() }"
           @click="commands.ordered_list"
         >
           <icon name="ol" />
@@ -93,7 +93,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('blockquote') }"
+          :class="{ 'is-active': isActive.blockquote() }"
           @click="commands.blockquote"
         >
           <icon name="quote" />
@@ -101,7 +101,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('code_block') }"
+          :class="{ 'is-active': isActive.code_block() }"
           @click="commands.code_block"
         >
           <icon name="code" />
diff --git a/examples/Components/Routes/Export/index.vue b/examples/Components/Routes/Export/index.vue
index 393a9543..e5a648b8 100644
--- a/examples/Components/Routes/Export/index.vue
+++ b/examples/Components/Routes/Export/index.vue
@@ -6,7 +6,7 @@
 
           <button
             class="menubar__button"
-            :class="{ 'is-active': isActive('bold') }"
+            :class="{ 'is-active': isActive.bold() }"
             @click="commands.bold"
           >
             <icon name="bold" />
@@ -14,7 +14,7 @@
 
           <button
             class="menubar__button"
-            :class="{ 'is-active': isActive('italic') }"
+            :class="{ 'is-active': isActive.italic() }"
             @click="commands.italic"
           >
             <icon name="italic" />
@@ -22,7 +22,7 @@
 
           <button
             class="menubar__button"
-            :class="{ 'is-active': isActive('code') }"
+            :class="{ 'is-active': isActive.code() }"
             @click="commands.code"
           >
             <icon name="code" />
@@ -30,7 +30,7 @@
 
           <button
             class="menubar__button"
-            :class="{ 'is-active': isActive('paragraph') }"
+            :class="{ 'is-active': isActive.paragraph() }"
             @click="commands.paragraph"
           >
             <icon name="paragraph" />
@@ -38,7 +38,7 @@
 
           <button
             class="menubar__button"
-            :class="{ 'is-active': isActive('heading', { level: 1 }) }"
+            :class="{ 'is-active': isActive.heading({ level: 1 }) }"
             @click="commands.heading({ level: 1 })"
           >
             H1
@@ -46,7 +46,7 @@
 
           <button
             class="menubar__button"
-            :class="{ 'is-active': isActive('heading', { level: 2 }) }"
+            :class="{ 'is-active': isActive.heading({ level: 2 }) }"
             @click="commands.heading({ level: 2 })"
           >
             H2
@@ -54,7 +54,7 @@
 
           <button
             class="menubar__button"
-            :class="{ 'is-active': isActive('heading', { level: 3 }) }"
+            :class="{ 'is-active': isActive.heading({ level: 3 }) }"
             @click="commands.heading({ level: 3 })"
           >
             H3
@@ -62,7 +62,7 @@
 
           <button
             class="menubar__button"
-            :class="{ 'is-active': isActive('bullet_list') }"
+            :class="{ 'is-active': isActive.bullet_list() }"
             @click="commands.bullet_list"
           >
             <icon name="ul" />
@@ -70,7 +70,7 @@
 
           <button
             class="menubar__button"
-            :class="{ 'is-active': isActive('ordered_list') }"
+            :class="{ 'is-active': isActive.ordered_list() }"
             @click="commands.ordered_list"
           >
             <icon name="ol" />
@@ -78,7 +78,7 @@
 
           <button
             class="menubar__button"
-            :class="{ 'is-active': isActive('code_block') }"
+            :class="{ 'is-active': isActive.code_block() }"
             @click="commands.code_block"
           >
             <icon name="code" />
diff --git a/examples/Components/Routes/FloatingMenu/index.vue b/examples/Components/Routes/FloatingMenu/index.vue
index ddae437e..f9015797 100644
--- a/examples/Components/Routes/FloatingMenu/index.vue
+++ b/examples/Components/Routes/FloatingMenu/index.vue
@@ -10,7 +10,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('heading', { level: 1 }) }"
+          :class="{ 'is-active': isActive.heading({ level: 1 }) }"
           @click="commands.heading({ level: 1 })"
         >
           H1
@@ -18,7 +18,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('heading', { level: 2 }) }"
+          :class="{ 'is-active': isActive.heading({ level: 2 }) }"
           @click="commands.heading({ level: 2 })"
         >
           H2
@@ -26,7 +26,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('heading', { level: 3 }) }"
+          :class="{ 'is-active': isActive.heading({ level: 3 }) }"
           @click="commands.heading({ level: 3 })"
         >
           H3
@@ -34,7 +34,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('bullet_list') }"
+          :class="{ 'is-active': isActive.bullet_list() }"
           @click="commands.bullet_list"
         >
           <icon name="ul" />
@@ -42,7 +42,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('ordered_list') }"
+          :class="{ 'is-active': isActive.ordered_list() }"
           @click="commands.ordered_list"
         >
           <icon name="ol" />
@@ -50,7 +50,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('blockquote') }"
+          :class="{ 'is-active': isActive.blockquote() }"
           @click="commands.blockquote"
         >
           <icon name="quote" />
@@ -58,7 +58,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('code_block') }"
+          :class="{ 'is-active': isActive.code_block() }"
           @click="commands.code_block"
         >
           <icon name="code" />
diff --git a/examples/Components/Routes/HidingMenuBar/index.vue b/examples/Components/Routes/HidingMenuBar/index.vue
index b779af2f..a5449618 100644
--- a/examples/Components/Routes/HidingMenuBar/index.vue
+++ b/examples/Components/Routes/HidingMenuBar/index.vue
@@ -9,7 +9,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('bold') }"
+          :class="{ 'is-active': isActive.bold() }"
           @click="commands.bold"
         >
           <icon name="bold" />
@@ -17,7 +17,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('italic') }"
+          :class="{ 'is-active': isActive.italic() }"
           @click="commands.italic"
         >
           <icon name="italic" />
@@ -25,7 +25,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('strike') }"
+          :class="{ 'is-active': isActive.strike() }"
           @click="commands.strike"
         >
           <icon name="strike" />
@@ -33,7 +33,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('underline') }"
+          :class="{ 'is-active': isActive.underline() }"
           @click="commands.underline"
         >
           <icon name="underline" />
@@ -41,7 +41,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('code') }"
+          :class="{ 'is-active': isActive.code() }"
           @click="commands.code"
         >
           <icon name="code" />
@@ -49,7 +49,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('paragraph') }"
+          :class="{ 'is-active': isActive.paragraph() }"
           @click="commands.paragraph"
         >
           <icon name="paragraph" />
@@ -57,7 +57,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('heading', { level: 1 }) }"
+          :class="{ 'is-active': isActive.heading({ level: 1 }) }"
           @click="commands.heading({ level: 1 })"
         >
           H1
@@ -65,7 +65,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('heading', { level: 2 }) }"
+          :class="{ 'is-active': isActive.heading({ level: 2 }) }"
           @click="commands.heading({ level: 2 })"
         >
           H2
@@ -73,7 +73,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('heading', { level: 3 }) }"
+          :class="{ 'is-active': isActive.heading({ level: 3 }) }"
           @click="commands.heading({ level: 3 })"
         >
           H3
@@ -81,7 +81,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('bullet_list') }"
+          :class="{ 'is-active': isActive.bullet_list() }"
           @click="commands.bullet_list"
         >
           <icon name="ul" />
@@ -89,7 +89,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('ordered_list') }"
+          :class="{ 'is-active': isActive.ordered_list() }"
           @click="commands.ordered_list"
         >
           <icon name="ol" />
@@ -97,7 +97,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('blockquote') }"
+          :class="{ 'is-active': isActive.blockquote() }"
           @click="commands.blockquote"
         >
           <icon name="quote" />
@@ -105,7 +105,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('code_block') }"
+          :class="{ 'is-active': isActive.code_block() }"
           @click="commands.code_block"
         >
           <icon name="code" />
diff --git a/examples/Components/Routes/Links/index.vue b/examples/Components/Routes/Links/index.vue
index 4f12cbb6..73dcc9d7 100644
--- a/examples/Components/Routes/Links/index.vue
+++ b/examples/Components/Routes/Links/index.vue
@@ -19,7 +19,7 @@
           <button
             class="menububble__button"
             @click="showLinkMenu(markAttrs('link'))"
-            :class="{ 'is-active': isActive('link') }"
+            :class="{ 'is-active': isActive.link() }"
           >
             <span>Add Link</span>
             <icon name="link" />
diff --git a/examples/Components/Routes/MenuBubble/index.vue b/examples/Components/Routes/MenuBubble/index.vue
index 0188c3bb..6a7780b5 100644
--- a/examples/Components/Routes/MenuBubble/index.vue
+++ b/examples/Components/Routes/MenuBubble/index.vue
@@ -10,7 +10,7 @@
 
         <button
           class="menububble__button"
-          :class="{ 'is-active': isActive('bold') }"
+          :class="{ 'is-active': isActive.bold() }"
           @click="commands.bold"
         >
           <icon name="bold" />
@@ -18,7 +18,7 @@
 
         <button
           class="menububble__button"
-          :class="{ 'is-active': isActive('italic') }"
+          :class="{ 'is-active': isActive.italic() }"
           @click="commands.italic"
         >
           <icon name="italic" />
@@ -26,7 +26,7 @@
 
         <button
           class="menububble__button"
-          :class="{ 'is-active': isActive('code') }"
+          :class="{ 'is-active': isActive.code() }"
           @click="commands.code"
         >
           <icon name="code" />
diff --git a/examples/Components/Routes/TodoList/index.vue b/examples/Components/Routes/TodoList/index.vue
index 20d4be90..0e92d41d 100644
--- a/examples/Components/Routes/TodoList/index.vue
+++ b/examples/Components/Routes/TodoList/index.vue
@@ -5,7 +5,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('bold') }"
+          :class="{ 'is-active': isActive.bold() }"
           @click="commands.bold"
         >
           <icon name="bold" />
@@ -13,7 +13,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('italic') }"
+          :class="{ 'is-active': isActive.italic() }"
           @click="commands.italic"
         >
           <icon name="italic" />
@@ -21,7 +21,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('code') }"
+          :class="{ 'is-active': isActive.code() }"
           @click="commands.code"
         >
           <icon name="code" />
@@ -29,7 +29,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': isActive('todo_list') }"
+          :class="{ 'is-active': isActive.todo_list() }"
           @click="commands.todo_list"
         >
           <icon name="checklist" />
diff --git a/packages/tiptap/src/Components/EditorFloatingMenu.js b/packages/tiptap/src/Components/EditorFloatingMenu.js
index 8761d44c..7bcb970d 100644
--- a/packages/tiptap/src/Components/EditorFloatingMenu.js
+++ b/packages/tiptap/src/Components/EditorFloatingMenu.js
@@ -42,7 +42,7 @@ export default {
       focused: this.editor.view.focused,
       focus: this.editor.focus,
       commands: this.editor.commands,
-      isActive: this.editor.isActive.bind(this.editor),
+      isActive: this.editor.isActive,
       markAttrs: this.editor.markAttrs.bind(this.editor),
       menu: this.menu,
     })
diff --git a/packages/tiptap/src/Components/EditorMenuBar.js b/packages/tiptap/src/Components/EditorMenuBar.js
index b816582f..6e0894d3 100644
--- a/packages/tiptap/src/Components/EditorMenuBar.js
+++ b/packages/tiptap/src/Components/EditorMenuBar.js
@@ -14,7 +14,7 @@ export default {
       focused: this.editor.view.focused,
       focus: this.editor.focus,
       commands: this.editor.commands,
-      isActive: this.editor.isActive.bind(this.editor),
+      isActive: this.editor.isActive,
       markAttrs: this.editor.markAttrs.bind(this.editor),
     })
   },
diff --git a/packages/tiptap/src/Components/EditorMenuBubble.js b/packages/tiptap/src/Components/EditorMenuBubble.js
index 0dd29288..c68fa8f5 100644
--- a/packages/tiptap/src/Components/EditorMenuBubble.js
+++ b/packages/tiptap/src/Components/EditorMenuBubble.js
@@ -42,7 +42,7 @@ export default {
       focused: this.editor.view.focused,
       focus: this.editor.focus,
       commands: this.editor.commands,
-      isActive: this.editor.isActive.bind(this.editor),
+      isActive: this.editor.isActive,
       markAttrs: this.editor.markAttrs.bind(this.editor),
       menu: this.menu,
     })
diff --git a/packages/tiptap/src/utils/Editor.js b/packages/tiptap/src/utils/Editor.js
index fbdfa272..19bea79c 100644
--- a/packages/tiptap/src/utils/Editor.js
+++ b/packages/tiptap/src/utils/Editor.js
@@ -284,17 +284,19 @@ export default class Editor {
     return this.activeMarkAttrs[type]
   }
 
-  isActive(type = null, attrs = {}) {
+  get isActive() {
     const types = {
       ...this.activeMarks,
       ...this.activeNodes,
     }
 
-    if (!types[type]) {
-      return false
-    }
+    Object
+      .entries(types)
+      .forEach(([name, value]) => {
+        types[name] = (attrs = {}) => value(attrs)
+      })
 
-    return types[type](attrs)
+    return types
   }
 
   destroy() {