change isActive

packages/core/src/Editor.ts

@@ -16,6 +16,7 @@ import getAllMethodNames from './utils/getAllMethodNames'
 import nodeIsActive from './utils/nodeIsActive'
 import markIsActive from './utils/markIsActive'
 import getMarkAttrs from './utils/getMarkAttrs'
+import getSchemaTypeByName from './utils/getSchemaTypeByName'
 import ExtensionManager from './ExtensionManager'
 import Extension from './Extension'
 import Node from './Node'
@@ -57,7 +58,6 @@ export class Editor extends EventEmitter {
     this.createExtensionManager()
     this.createSchema()
     this.createView()
-    this.setActiveNodesAndMarks()
     this.registerCommand('focus', require('./commands/focus').default)
     this.registerCommand('insertText', require('./commands/insertText').default)
     this.registerCommand('insertHTML', require('./commands/insertHTML').default)
@@ -172,7 +172,6 @@ export class Editor extends EventEmitter {
     const state = this.state.apply(transaction)
     this.view.updateState(state)
     this.storeSelection()
-    this.setActiveNodesAndMarks()
     this.emit('transaction', { transaction })
     
     if (!transaction.docChanged || transaction.getMeta('preventUpdate')) {
@@ -182,34 +181,20 @@ export class Editor extends EventEmitter {
     this.emit('update', { transaction })
   }
 
-  setActiveNodesAndMarks() {
-    this.activeMarks = collect(this.schema.marks)
-      .mapWithKeys((mark: any) => [mark.name, () => markIsActive(this.state, mark)])
-      .all()
-
-    this.activeMarkAttrs = collect(this.schema.marks)
-      .mapWithKeys((mark: any) => [mark.name, () => getMarkAttrs(this.state, mark)])
-      .all()
-
-    this.activeNodes = collect(this.schema.nodes)
-      .mapWithKeys((node: any) => [node.name, (attrs = {}) => nodeIsActive(this.state, node, attrs)])
-      .all()
-  }
-
   getMarkAttrs(name: string) {
-    return this.activeMarkAttrs[name]
+    return getMarkAttrs(this.state, this.schema.marks[name])
   }
 
-  get isActive() {
+  isActive(name: string, attrs = {}) {
-    return Object
+    const schemaType = getSchemaTypeByName(name, this.schema)
-      .entries({
+
-        ...this.activeMarks,
+    if (schemaType === 'node') {
-        ...this.activeNodes,
+      return nodeIsActive(this.state, this.schema.nodes[name], attrs)
-      })
+    } else if (schemaType === 'mark') {
-      .reduce((types, [name, value]) => ({
+      return markIsActive(this.state, this.schema.marks[name])
-        ...types,
+    }
-        [name]: (attrs = {}) => value(attrs),
+
-      }), {})
+    return false
   }
 
   // public setParentComponent(component = null) {

packages/core/src/utils/getSchemaTypeByName.ts

@@ -0,0 +1,13 @@
+import { Schema } from 'prosemirror-model'
+
+export default function getSchemaTypeByName(name: string, schema: Schema) {
+  if (schema.nodes[name]) {
+    return 'node'
+  }
+
+  if (schema.marks[name]) {
+    return 'mark'
+  }
+
+  return null
+}

src/demos/HandleExtensions/index.vue

@@ -7,10 +7,10 @@
       <button @click="editor.redo().focus()">
         redo
       </button>
-      <button @click="editor.bold().focus()" :class="{ 'is-active': editor.isActive.bold() }">
+      <button @click="editor.bold().focus()" :class="{ 'is-active': editor.isActive('bold') }">
         bold
       </button>
-      <button @click="editor.italic().focus()" :class="{ 'is-active': editor.isActive.italic() }">
+      <button @click="editor.italic().focus()" :class="{ 'is-active': editor.isActive('italic') }">
         italic
       </button>
     </div>