diff --git a/packages/client/src/tiptap/menus/color-picker/index.tsx b/packages/client/src/tiptap/menus/color-picker/index.tsx
index 78ced73b..ddff878f 100644
--- a/packages/client/src/tiptap/menus/color-picker/index.tsx
+++ b/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)',
- 'rgb(7, 71, 166)',
- 'rgb(0, 141, 166)',
- 'rgb(0, 102, 68)',
- 'rgb(255, 153, 31)',
- 'rgb(191, 38, 0)',
- 'rgb(64, 50, 148)',
- 'rgb(151, 160, 175)',
- 'rgb(76, 154, 255)',
- 'rgb(0, 184, 217)',
- 'rgb(54, 179, 126)',
- 'rgb(255, 196, 0)',
- 'rgb(255, 86, 48)',
- 'rgb(101, 84, 192)',
- 'rgb(255, 255, 255)',
- 'rgb(179, 212, 255)',
- 'rgb(179, 245, 255)',
- 'rgb(171, 245, 209)',
- 'rgb(255, 240, 179)',
- 'rgb(255, 189, 173)',
- 'rgb(234, 230, 255)',
+ '#000000',
+ '#262626',
+ '#595959',
+ '#8C8C8C',
+ '#BFBFBF',
+ '#D9D9D9',
+ '#E9E9E9',
+ '#F5F5F5',
+ '#FAFAFA',
+ '#FFFFFF',
+ '#F5222D',
+ '#FA541C',
+ '#FA8C16',
+ '#FADB14',
+ '#52C41A',
+ '#13C2C2',
+ '#1890FF',
+ '#2F54EB',
+ '#722ED1',
+ '#EB2F96',
+ '#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,14 +89,21 @@ export const ColorPicker: React.FC<{
trigger="click"
position={'bottom'}
render={
-
- {colors.map((color) => {
- return (
-
onSetColor(color)}>
-
-
- );
- })}
+
+
onSetColor(null)}>
+
+ 无颜色
+
+
+
+ {colors.map((color) => {
+ return (
+
onSetColor(color)}>
+
+
+ );
+ })}
+
}
>
diff --git a/packages/client/src/tiptap/menus/color-picker/style.module.scss b/packages/client/src/tiptap/menus/color-picker/style.module.scss
index de09762c..7b9b6f74 100644
--- a/packages/client/src/tiptap/menus/color-picker/style.module.scss
+++ b/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;
- height: 32px;
+ width: 24px;
+ 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;
- height: 28px;
+ width: 20px;
+ height: 20px;
border: 1px solid var(--semi-color-border);
border-radius: 2px;
}
diff --git a/packages/client/src/tiptap/menus/color.tsx b/packages/client/src/tiptap/menus/color.tsx
index 45c17b61..ad97d76b 100644
--- a/packages/client/src/tiptap/menus/color.tsx
+++ b/packages/client/src/tiptap/menus/color.tsx
@@ -16,7 +16,7 @@ export const ColorMenu: React.FC<{ editor: any }> = ({ editor }) => {
<>
{
- 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 }) => {
{
- editor.chain().focus().setBackgroundColor(color).run();
+ color
+ ? editor.chain().focus().setBackgroundColor(color).run()
+ : editor.chain().focus().unsetBackgroundColor().run();
}}
disabled={isTitleActive(editor)}
>