Ryan/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2025-11-10 03:32:06 +10:00
Code Issues Packages Projects Releases Wiki Activity

add bg color name

Browse Source
This commit is contained in:
Philipinho
2025-07-14 13:43:43 -07:00
parent bcca52fa70
commit 07d5833695
4 changed files with 51 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/client/src/features/editor/components/table/table-background-color.tsx
View File

@ -38,12 +38,18 @@ export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
const { t } = useTranslation();
const [opened, setOpened] = React.useState(false);
const setTableCellBackground = (color: string) => {
const setTableCellBackground = (color: string, colorName: string) => {
editor
.chain()
.focus()
.updateAttributes("tableCell", { backgroundColor: color || null })
.updateAttributes("tableHeader", { backgroundColor: color || null })
.updateAttributes("tableCell", {
backgroundColor: color || null,
backgroundColorName: color ? colorName : null
})
.updateAttributes("tableHeader", {
backgroundColor: color || null,
backgroundColorName: color ? colorName : null
})
.run();
setOpened(false);
};
@ -65,7 +71,7 @@ export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
return (
<Popover
width={150}
width={200}
position="bottom"
opened={opened}
onChange={setOpened}
@ -101,7 +107,7 @@ export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
{TABLE_COLORS.map((item, index) => (
<UnstyledButton
key={index}
onClick={() => setTableCellBackground(item.color)}
onClick={() => setTableCellBackground(item.color, item.name)}
style={{
position: "relative",
width: "24px",

28
apps/client/src/features/editor/styles/table.css
View File

@ -74,44 +74,44 @@
table {
@mixin dark {
/* Blue */
td[style*="background-color: #b4d5ff"],
th[style*="background-color: #b4d5ff"] {
td[data-background-color="#b4d5ff"],
th[data-background-color="#b4d5ff"] {
background-color: #1a3a5c !important;
}
/* Green */
td[style*="background-color: #acf5d2"],
th[style*="background-color: #acf5d2"] {
td[data-background-color="#acf5d2"],
th[data-background-color="#acf5d2"] {
background-color: #1a4d3a !important;
}
/* Yellow */
td[style*="background-color: #fef1b4"],
th[style*="background-color: #fef1b4"] {
td[data-background-color="#fef1b4"],
th[data-background-color="#fef1b4"] {
background-color: #7c5014 !important;
}
/* Red */
td[style*="background-color: #ffbead"],
th[style*="background-color: #ffbead"] {
td[data-background-color="#ffbead"],
th[data-background-color="#ffbead"] {
background-color: #5c2a23 !important;
}
/* Pink */
td[style*="background-color: #ffc7fe"],
th[style*="background-color: #ffc7fe"] {
td[data-background-color="#ffc7fe"],
th[data-background-color="#ffc7fe"] {
background-color: #4d2a4d !important;
}
/* Gray */
td[style*="background-color: #eaecef"],
th[style*="background-color: #eaecef"] {
td[data-background-color="#eaecef"],
th[data-background-color="#eaecef"] {
background-color: #2a2e33 !important;
}
/* Purple */
td[style*="background-color: #c1b7f2"],
th[style*="background-color: #c1b7f2"] {
td[data-background-color="#c1b7f2"],
th[data-background-color="#c1b7f2"] {
background-color: #3a2f5c !important;
}
}

13
packages/editor-ext/src/lib/table/cell.ts
View File

@ -16,6 +16,19 @@ export const TableCell = TiptapTableCell.extend({
}
return {
style: `background-color: ${attributes.backgroundColor}`,
'data-background-color': attributes.backgroundColor,
};
},
},
backgroundColorName: {
default: null,
parseHTML: (element) => element.getAttribute('data-color-name') || null,
renderHTML: (attributes) => {
if (!attributes.backgroundColorName) {
return {};
}
return {
'data-color-name': attributes.backgroundColorName.toLowerCase(),
};
},
},

13
packages/editor-ext/src/lib/table/header.ts
View File

@ -16,6 +16,19 @@ export const TableHeader = TiptapTableHeader.extend({
}
return {
style: `background-color: ${attributes.backgroundColor}`,
'data-background-color': attributes.backgroundColor,
};
},
},
backgroundColorName: {
default: null,
parseHTML: (element) => element.getAttribute('data-color-name') || null,
renderHTML: (attributes) => {
if (!attributes.backgroundColorName) {
return {};
}
return {
'data-color-name': attributes.backgroundColorName.toLowerCase(),
};
},
},