feat: optimize rich text editor toolbar style (#444)

packages/theme/src/rich-text-editor/index.less

@@ -3,25 +3,17 @@
 .tiny-rich-text-editor {
   .component-css-vars-rich-text-editor();
 
-  width: 500px;
-  height: 350px;
-  margin: 0 auto;
-  outline: 3px solid var(--ti-rich-text-editor-box-outline-color);
-  border-radius: 8px 8px 0 0;
+  height: 100%;
 
-  &:hover {
-    outline: 3px solid var(--ti-rich-text-editor-box-outline-hover-color);
-  }
-
-  .button-area {
-    text-align: center;
+  &__toolbar {
+    padding: 8px;
+    border: 1px solid var(--ti-rich-text-editor-box-outline-color);
   }
 
   button {
     // color: #fff;
     // color: black;
-    width: 2.00rem;
-    height: 2.00rem;
+    height: 24px;
     padding: .25rem;
     margin-right: .25rem;
     border: none;
@@ -29,24 +21,21 @@
     background: transparent;
     cursor: pointer;
 
-    &:hover {
-      background-color: var(--ti-rich-text-editor-button-hover);
+    &:not(:disabled):hover, &.is-active {
+      svg, path {
+        fill: var(--ti-rich-text-editor-button-hover);
+      }
+    }
+
+    &:disabled {
+      color: var(--ti-rich-text-editor-button-disabled);
+      cursor: not-allowed;
     }
   }
 
-  button:disabled {
-    // color: rgba(34, 47, 62, .5);
-    background-color: var(--ti-rich-text-editor-button-disabled);
-    cursor: not-allowed;
-  }
-
-  button.is-active {
-    background-color: var(--ti-rich-text-editor-button-active);
-  }
-
   .tiny-svg {
-    width: 24px;
-    height: 24px;
+    width: 18px;
+    height: 18px;
     vertical-align: middle;
     overflow: hidden;
     display: inline-block;
@@ -199,8 +188,6 @@
     }
 
     &:hover {
-      background-color: var(--ti-rich-text-editor-button-active);
-
       .line-height-options {
         display: flex;
         flex-direction: column;
@@ -224,11 +211,12 @@
 }
 
 // 富文本编辑器的主题区域，需要对高度进行调整，达到融为一体
-.small-box {
+.tiny-rich-text-editor__container {
   overflow: auto;
   padding: 0 10px;
-  height: 200px;
-  margin-right: 2px;
+  height: 100%;
+  border: 1px solid var(--ti-rich-text-editor-box-outline-color);
+  border-top: 0;
 
   &::-webkit-scrollbar {
     width: 4px;

packages/theme/src/rich-text-editor/vars.less

@@ -1,9 +1,9 @@
 .component-css-vars-rich-text-editor() {
   --ti-rich-text-editor-box-outline-color: var(--ti-common-color-line-normal);
   --ti-rich-text-editor-box-outline-hover-color: var(--ti-common-color-line-hover);
-  --ti-rich-text-editor-button-hover: var(--ti-base-color-brand-8);
-  --ti-rich-text-editor-button-disabled: var(--ti-common-color-primary-disabled-bgcolor);
-  --ti-rich-text-editor-button-active: var(--ti-base-color-brand-8);
+  --ti-rich-text-editor-button-hover: var(--ti-common-color-icon-hover);
+  --ti-rich-text-editor-button-active: var(--ti-common-color-icon-active);
+  --ti-rich-text-editor-button-disabled: var(--ti-common-color-icon-disabled);
   --ti-rich-text-editor-poplist-item-selected-bg-color: var(--ti-common-color-selected-background);
   --ti-rich-text-editor-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color);
 }

packages/vue-common/src/index.ts

@@ -233,6 +233,11 @@ export const svg = ({ name = 'Icon', component }) => {
             extend.nativeOn = context.listeners
           }
 
+          // 解决富文本组件工具栏图标大小不正确的问题
+          if (name.indexOf('IconRichText') !== -1) {
+            extend.viewBox = '0 0 24 24'
+          }
+
           return renderComponent({
             component,
             props: mergeProps,

packages/vue/src/rich-text-editor/src/pc.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tiny-rich-text-editor">
-    <div class="button-area">
+    <div class="tiny-rich-text-editor__toolbar">
       <!-- starter-kit功能区 -->
       <button
         title="bold"
@@ -258,7 +258,7 @@
         </button>
       </BubbleMenu>
     </div>
-    <div class="small-box">
+    <div class="tiny-rich-text-editor__container">
       <EditorContent :editor="state.editor"></EditorContent>
     </div>
   </div>