diff --git a/components/editor/intelli/menu/menu-bubble.jsx b/components/editor/intelli/menu/menu-bubble.jsx
index 473dd83..5a37d72 100644
--- a/components/editor/intelli/menu/menu-bubble.jsx
+++ b/components/editor/intelli/menu/menu-bubble.jsx
@@ -10,13 +10,15 @@ export const MenuBubble = ({ editor }) => {
   return <BubbleMenu className={'ToggleGroup'} editor={editor} tippyOptions={{ duration: 100 }}>
     {selectLength > 20 && <button
       onClick={() => {
-        editor.chain().focus().toggleBold().run()
-        const selection = editor.state.selection
+        editor.commands.setTrackChangeStatus(true)
 
+        const selection = editor.state.selection
         editor.chain().focus().insertContentAt({
           from: selection.from,
           to: selection.to
-        }, 'TODO, calling API').run()
+        }, '永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹；又有清流激湍，映带左右').run()
+
+        editor.commands.setTrackChangeStatus(false)
       }}
       value="left" aria-label="Left aligned"
       className={editor.isActive('bold') ? 'is-active BubbleMenuItem' : 'BubbleMenuItem'}
diff --git a/pages/editor.css b/pages/editor.css
index bdb515c..676050d 100644
--- a/pages/editor.css
+++ b/pages/editor.css
@@ -213,3 +213,22 @@ button {
         background-position: 0 0;
     }
 }
+
+.ProseMirror-focused {
+    border: 1px solid rgb(128, 128, 128);
+    outline: none;
+}
+
+.ProseMirror p {
+    margin: 0;
+}
+
+.ProseMirror insert {
+    color: green;
+    text-decoration: underline;
+}
+
+.ProseMirror delete {
+    color: red;
+    text-decoration: line-through;
+}