perf:h4&h5 render

Author: iRuxu

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+package-lock.json
 
 # local env files
 .env.local

config/global.less

@@ -2,6 +2,7 @@
 // 旧主题色
 // @primary:#0366d6;
 @primary:#4f46e5;
+@v4yellow: #f5bd1e;
 
 // 文字颜色（黑底、白底）
 @color: #3d454d;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-editor",
-    "version": "3.0.10",
+    "version": "3.0.11",
     "description": "JX3BOX Article & Editor",
     "main": "index.js",
     "scripts": {
@@ -15,7 +15,7 @@
     "dependencies": {
         "@element-plus/icons-vue": "^2.0.10",
         "@imengyu/vue3-context-menu": "^1.5.4",
-        "@jx3box/jx3box-common": "^9.1.3",
+        "@jx3box/jx3box-common": "^9.1.8",
         "@jx3box/jx3box-data": "^3.9.4",
         "@jx3box/jx3box-emotion": "^1.3.0",
         "@jx3box/jx3box-macro": "^1.0.3",

src/assets/css/tinymce/h.less

@@ -32,30 +32,51 @@
 
     h4 {
         font-size: 15px;
-        padding: 8px 10px;
+        padding: 8px 10px 8px 20px;
 
         background-color: #fafbfc;
         border-radius: 6px;
-        border-left:4px solid @primary;
-
+        // border-left:4px solid @primary;
 
         position: relative;
         overflow: hidden;
         // background-color: #f1f1ff;
         // border: 1px solid @primary;
         &::before {
             content: "";
-            font-size: 20px;
             display: block;
             position: absolute;
-            width: 80px;
-            height: 3px;
-            top: 0;
-            left: 15px;
-            // background-color: @primary;
+            width: 5px;
+            height: 60%;
+            top: 50%;
+            transform: translateY(-50%);
+            left: 10px;
+            background-color: @primary;
+            border-radius: 10px;
+            transition: all 0.2s ease;
             // border-bottom-right-radius: 20px;
             // border-bottom-left-radius: 20px;
         }
+        // &::after {
+        //     content: "";
+        //     display: block;
+        //     position: absolute;
+        //     width: 5px;
+        //     height: 60%;
+        //     top: 50%;
+        //     transform: translateY(-50%);
+        //     left: 10px;
+        //     background-color: @v4yellow;
+        //     border-radius: 10px;
+        //     z-index: 2;
+        //     display: none;
+        // }
+
+        &:hover {
+            &::before {
+                background-color: @v4yellow;
+            }
+        }
     }
 
     h5 {
@@ -74,6 +95,11 @@
             bottom: -1px;
             left: 0;
         }
+        &:hover{
+            &::after {
+                background-color: @v4yellow;
+            }
+        }
     }
 
     h6 {