feat: node active

src/lib/components/buttons/OAlignDropdown.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import { isAlignmentActive } from '../../utils/alignment'
+import { isNodeActive } from '../../utils/node'
 export default {
   name: 'o-align-dropdown',
   data () {
@@ -39,7 +39,7 @@ export default {
   },
   methods: {
     isActive (alignment) {
-      return isAlignmentActive(this.editor.state, alignment)
+      return isNodeActive(this.editor.state, 'textAlign', alignment)
     }
   },
   computed: {

src/lib/components/buttons/OHeadingDropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <q-btn-dropdown icon="mdi-format-header-pound" menu-anchor="bottom left" menu-self="top left" class="o-heading-dropdown" content-class="o-menu o-heading-dropdown-menu" flat>
-    <o-heading-list :commands="commands" :is-active="isActive" />
+    <o-heading-list :editor="editor" :commands="commands" />
   </q-btn-dropdown>
 </template>
 
@@ -13,10 +13,10 @@ export default {
     }
   },
   props: {
-    commands: {
+    editor: {
       type: Object
     },
-    isActive: {
+    commands: {
       type: Object
     }
   },

src/lib/components/buttons/OHeadingList.vue

@@ -1,49 +1,53 @@
 <template>
   <q-list class="o-heading-list">
-    <q-item :class="{ 'is-active': isActive.paragraph() }" clickable v-close-popup @click.native="commands.paragraph">
+    <q-item clickable v-close-popup @click.native="commands.paragraph">
       <q-item-section side><q-icon name="mdi-format-pilcrow" /></q-item-section>
       <q-item-section>正文</q-item-section>
     </q-item>
     <q-separator />
-    <q-item :class="{ 'is-active': isActive.heading({ level: 1 }) }" clickable v-close-popup @click.native="commands.heading({ level: 1 })">
+    <q-item :class="{ 'is-active': isActive(1) }" clickable v-close-popup @click.native="commands.heading({ level: 1 })">
       <q-item-section side>H1</q-item-section>
       <q-item-section>H1 标题</q-item-section>
     </q-item>
-    <q-item :class="{ 'is-active': isActive.heading({ level: 2 }) }" clickable v-close-popup @click.native="commands.heading({ level: 2 })">
+    <q-item :class="{ 'is-active': isActive(2) }" clickable v-close-popup @click.native="commands.heading({ level: 2 })">
       <q-item-section side>H2</q-item-section>
       <q-item-section>H2 标题</q-item-section>
     </q-item>
-    <q-item :class="{ 'is-active': isActive.heading({ level: 3 }) }" clickable v-close-popup @click.native="commands.heading({ level: 3 })">
+    <q-item :class="{ 'is-active': isActive(3) }" clickable v-close-popup @click.native="commands.heading({ level: 3 })">
       <q-item-section side>H3</q-item-section>
       <q-item-section>H3 标题</q-item-section>
     </q-item>
-    <q-item :class="{ 'is-active': isActive.heading({ level: 4 }) }" clickable v-close-popup @click.native="commands.heading({ level: 4 })">
+    <q-item :class="{ 'is-active': isActive(4) }" clickable v-close-popup @click.native="commands.heading({ level: 4 })">
       <q-item-section side>H4</q-item-section>
       <q-item-section>H4 标题</q-item-section>
     </q-item>
-    <q-item :class="{ 'is-active': isActive.heading({ level: 5 }) }" clickable v-close-popup @click.native="commands.heading({ level: 5 })">
+    <q-item :class="{ 'is-active': isActive(5) }" clickable v-close-popup @click.native="commands.heading({ level: 5 })">
       <q-item-section side>H5</q-item-section>
       <q-item-section>H5 标题</q-item-section>
     </q-item>
   </q-list>
 </template>
 
 <script>
+import { isNodeActive } from '../../utils/node'
 export default {
   name: 'o-heading-list',
   data () {
     return {
     }
   },
   props: {
-    commands: {
+    editor: {
       type: Object
     },
-    isActive: {
+    commands: {
       type: Object
     }
   },
   methods: {
+    isActive (level) {
+      return isNodeActive(this.editor.state, 'level', level)
+    }
   },
   computed: {
   }

src/lib/components/buttons/OLineHeightDropdown.vue

@@ -3,7 +3,7 @@
     <q-list>
       <template v-for="(item, index) of types">
         <q-separator :key="index" v-if="item.separator" />
-        <q-item :key="index" clickable v-close-popup
+        <q-item :class="{ 'is-active': isActive(item.value) }" :key="index" clickable v-close-popup
                 @click.native="commands.lineHeight({lineHeight: item.value})" v-else>
           <q-item-section>{{item.label}}</q-item-section>
         </q-item>
@@ -13,6 +13,7 @@
 </template>
 
 <script>
+import { isNodeActive } from '../../utils/node'
 export default {
   name: 'o-line-height-dropdown',
   data () {
@@ -29,11 +30,17 @@ export default {
     }
   },
   props: {
+    editor: {
+      type: Object
+    },
     commands: {
       type: Object
     }
   },
   methods: {
+    isActive (lineHeight) {
+      return isNodeActive(this.editor.state, 'lineHeight', lineHeight)
+    }
   },
   computed: {
   }

src/lib/utils/alignment.js

@@ -11,24 +11,6 @@ const ALLOWED_NODE_TYPES = [
   'todo_item',
 ]
 
-export function isAlignmentActive (state, alignment) {
-  const { selection, doc } = state
-  const { from, to } = selection
-
-  let keepLooking = true
-  let active = false
-
-  doc.nodesBetween(from, to, (node) => {
-    if (keepLooking && node.attrs.textAlign === alignment) {
-      keepLooking = false
-      active = true
-    }
-    return keepLooking
-  })
-
-  return active
-}
-
 export function setAlignment (tr, alignment) {
   const { selection, doc } = tr
 

src/lib/utils/node.js

@@ -0,0 +1,24 @@
+/**
+ * Utils: node
+ * @author Micle, [email protected]
+ */
+
+function isNodeActive (state, name, value) {
+  const { selection, doc } = state
+  const { from, to } = selection
+
+  let keepLooking = true
+  let active = false
+
+  doc.nodesBetween(from, to, (node) => {
+    if (keepLooking && node.attrs[name] === value) {
+      keepLooking = false
+      active = true
+    }
+    return keepLooking
+  })
+
+  return active
+}
+
+export { isNodeActive }