diff --git a/src/editor/index.js b/src/editor/index.js
index aee0f063..22e8fa82 100644
--- a/src/editor/index.js
+++ b/src/editor/index.js
@@ -9,6 +9,7 @@ import {
   isAganippeEditorElement,
   findNearestParagraph,
   markedText2Html,
+  operateClassName,
   insertAfter // eslint-disable-line no-unused-vars
 } from './utils.js'
 
@@ -192,12 +193,8 @@ class Aganippe {
 
   subscribeParagraphChange (newParagraph, oldParagraph) {
     console.log(newParagraph.id, oldParagraph.id)
-    if (oldParagraph.classList.contains(activeClassName)) {
-      oldParagraph.classList.remove(activeClassName)
-    }
-    if (!newParagraph.classList.contains(activeClassName)) {
-      newParagraph.classList.add(activeClassName)
-    }
+    operateClassName(oldParagraph, 'remove', activeClassName)
+    operateClassName(newParagraph, 'add', activeClassName)
   }
   // TODO: refactor
   handleKeyDown () {
diff --git a/src/editor/utils.js b/src/editor/utils.js
index 40650a56..4c859651 100644
--- a/src/editor/utils.js
+++ b/src/editor/utils.js
@@ -211,14 +211,6 @@ export const updateBlock = (origin, tagName) => {
   replaceElement(origin, html2element(html))
 }
 
-/**
- * translate paragraph to ohter block
- */
-
-/**
- * viewModel2Html
- */
-
 export const createEmptyElement = (ids, tagName, attrs) => {
   const id = getUniqueId(ids)
   const element = document.createElement(tagName)
@@ -233,6 +225,15 @@ export const createEmptyElement = (ids, tagName, attrs) => {
   return element
 }
 
+/**
+ * [description `add` or `remove` className of element
+ */
+export const operateClassName = (element, ctrl, className) => {
+  const containClassName = element.classList.contains(className)
+  const needOperation = ctrl === 'add' ? !containClassName : containClassName
+  return needOperation && element.classList[ctrl](className)
+}
+
 export const findNearestParagraph = node => {
   do {
     if (isAganippeParagraph(node)) return node