feat: improve color

packages/client/src/tiptap/menus/color-picker/index.tsx

@@ -1,29 +1,80 @@
 import React from 'react';
-import { Dropdown } from '@douyinfe/semi-ui';
+import { Dropdown, Typography } from '@douyinfe/semi-ui';
 import styles from './style.module.scss';
 
+const { Text } = Typography;
+
 const colors = [
-  'rgb(23, 43, 77)',
+  '#000000',
-  'rgb(7, 71, 166)',
+  '#262626',
-  'rgb(0, 141, 166)',
+  '#595959',
-  'rgb(0, 102, 68)',
+  '#8C8C8C',
-  'rgb(255, 153, 31)',
+  '#BFBFBF',
-  'rgb(191, 38, 0)',
+  '#D9D9D9',
-  'rgb(64, 50, 148)',
+  '#E9E9E9',
-  'rgb(151, 160, 175)',
+  '#F5F5F5',
-  'rgb(76, 154, 255)',
+  '#FAFAFA',
-  'rgb(0, 184, 217)',
+  '#FFFFFF',
-  'rgb(54, 179, 126)',
+  '#F5222D',
-  'rgb(255, 196, 0)',
+  '#FA541C',
-  'rgb(255, 86, 48)',
+  '#FA8C16',
-  'rgb(101, 84, 192)',
+  '#FADB14',
-  'rgb(255, 255, 255)',
+  '#52C41A',
-  'rgb(179, 212, 255)',
+  '#13C2C2',
-  'rgb(179, 245, 255)',
+  '#1890FF',
-  'rgb(171, 245, 209)',
+  '#2F54EB',
-  'rgb(255, 240, 179)',
+  '#722ED1',
-  'rgb(255, 189, 173)',
+  '#EB2F96',
-  'rgb(234, 230, 255)',
+  '#FFE8E6',
+  '#FFECE0',
+  '#FFEFD1',
+  '#FCFCCA',
+  '#E4F7D2',
+  '#D3F5F0',
+  '#D4EEFC',
+  '#DEE8FC',
+  '#EFE1FA',
+  '#FAE1EB',
+  '#FFA39E',
+  '#FFBB96',
+  '#FFD591',
+  '#FFFB8F',
+  '#B7EB8F',
+  '#87E8DE',
+  '#91D5FF',
+  '#ADC6FF',
+  '#D3ADF7',
+  '#FFADD2',
+  '#FF4D4F',
+  '#FF7A45',
+  '#FFA940',
+  '#FFEC3D',
+  '#73D13D',
+  '#36CFC9',
+  '#40A9FF',
+  '#597EF7',
+  '#9254DE',
+  '#F759AB',
+  '#CF1322',
+  '#D4380D',
+  '#D46B08',
+  '#D4B106',
+  '#389E0D',
+  '#08979C',
+  '#096DD9',
+  '#1D39C4',
+  '#531DAB',
+  '#C41D7F',
+  '#820014',
+  '#871400',
+  '#873800',
+  '#614700',
+  '#135200',
+  '#00474F',
+  '#003A8C',
+  '#061178',
+  '#22075E',
+  '#780650',
 ];
 
 export const ColorPicker: React.FC<{
@@ -38,6 +89,12 @@ export const ColorPicker: React.FC<{
       trigger="click"
       position={'bottom'}
       render={
+        <div style={{ padding: '8px 0' }}>
+          <div className={styles.emptyWrap} onClick={() => onSetColor(null)}>
+            <span></span>
+            <Text>无颜色</Text>
+          </div>
+
           <div className={styles.colorWrap}>
             {colors.map((color) => {
               return (
@@ -47,6 +104,7 @@ export const ColorPicker: React.FC<{
               );
             })}
           </div>
+        </div>
       }
     >
       <span style={{ display: 'inline-block' }}>{children}</span>

packages/client/src/tiptap/menus/color-picker/style.module.scss

@@ -1,20 +1,53 @@
+.emptyWrap {
+  display: flex;
+  flex-wrap: nowrap;
+  padding: 8px 10px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--semi-color-fill-1);
+  }
+
+  > span:first-child {
+    position: relative;
+    width: 18px;
+    height: 18px;
+    display: block;
+    border-radius: 2px 2px;
+    border: 1px solid #e8e8e8;
+    margin-right: 8px;
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 8px;
+      left: 0px;
+      width: 17px;
+      height: 0;
+      border-bottom: 2px solid #ff5151;
+      transform: rotate(45deg);
+    }
+  }
+}
+
 .colorWrap {
   display: flex;
   flex-wrap: wrap;
-  width: 240px;
+  width: 256px;
   padding: 8px;
 
   .colorItem {
     display: flex;
-    width: 32px;
+    width: 24px;
-    height: 32px;
+    height: 24px;
     cursor: pointer;
     border: 1px solid transparent;
     border-radius: 4px;
     justify-content: center;
     align-items: center;
 
-    &:nth-of-type(n + 8) {
+    &:nth-of-type(n + 11) {
       margin-top: 4px;
     }
 
@@ -24,8 +57,8 @@
 
     > span {
       display: block;
-      width: 28px;
+      width: 20px;
-      height: 28px;
+      height: 20px;
       border: 1px solid var(--semi-color-border);
       border-radius: 2px;
     }

packages/client/src/tiptap/menus/color.tsx

@@ -16,7 +16,7 @@ export const ColorMenu: React.FC<{ editor: any }> = ({ editor }) => {
     <>
       <ColorPicker
         onSetColor={(color) => {
-          editor.chain().focus().setColor(color).run();
+          color ? editor.chain().focus().setColor(color).run() : editor.chain().focus().unsetColor(color).run();
         }}
         disabled={isTitleActive(editor)}
       >
@@ -49,7 +49,9 @@ export const ColorMenu: React.FC<{ editor: any }> = ({ editor }) => {
 
       <ColorPicker
         onSetColor={(color) => {
-          editor.chain().focus().setBackgroundColor(color).run();
+          color
+            ? editor.chain().focus().setBackgroundColor(color).run()
+            : editor.chain().focus().unsetBackgroundColor().run();
         }}
         disabled={isTitleActive(editor)}
       >