Skip to content

#1196/feat: add text background highlight #1204

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

#1196/feat: add text background highlight #1204

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9816442
#1196/feat: add text background highlight
sanua356 May 23, 2025
ae9e87d
Merge branch 'main' into text-background-highlight
sanua356 Jun 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions apps/client/public/locales/de-DE/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,5 +386,6 @@
"Failed to share page": "Fehler beim Teilen der Seite",
"Copy page": "Seite kopieren",
"Copy page to a different space.": "Seite in einen anderen Bereich kopieren.",
"Page copied successfully": "Seite erfolgreich kopiert"
}
"Page copied successfully": "Seite erfolgreich kopiert",
"Background color": "Hintergrundfarbe"
}
3 changes: 2 additions & 1 deletion apps/client/public/locales/en-US/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -389,5 +389,6 @@
"Failed to share page": "Failed to share page",
"Copy page": "Copy page",
"Copy page to a different space.": "Copy page to a different space.",
"Page copied successfully": "Page copied successfully"
"Page copied successfully": "Page copied successfully",
"Background color": "Background color"
}
5 changes: 3 additions & 2 deletions apps/client/public/locales/es-ES/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,5 +386,6 @@
"Failed to share page": "Error al compartir la página",
"Copy page": "Copy page",
"Copy page to a different space.": "Copy page to a different space.",
"Page copied successfully": "Page copied successfully"
}
"Page copied successfully": "Page copied successfully",
"Background color": "Color de fondo"
}
5 changes: 3 additions & 2 deletions apps/client/public/locales/fr-FR/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,5 +386,6 @@
"Failed to share page": "Échec du partage de la page",
"Copy page": "Copier la page",
"Copy page to a different space.": "Copier la page dans un autre espace.",
"Page copied successfully": "Page copiée avec succès"
}
"Page copied successfully": "Page copiée avec succès",
"Background color": "Couleur de fond"
}
5 changes: 3 additions & 2 deletions apps/client/public/locales/it-IT/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,5 +386,6 @@
"Failed to share page": "Condivisione della pagina fallita",
"Copy page": "Copia pagina",
"Copy page to a different space.": "Copia pagina in un altro spazio.",
"Page copied successfully": "Pagina copiata con successo"
}
"Page copied successfully": "Pagina copiata con successo",
"Background color": "Colore di sfondo"
}
5 changes: 3 additions & 2 deletions apps/client/public/locales/ja-JP/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,5 +386,6 @@
"Failed to share page": "ページの共有に失敗しました",
"Copy page": "ページをコピー",
"Copy page to a different space.": "ページを別のスペースにコピーします。",
"Page copied successfully": "ページのコピーに成功しました"
}
"Page copied successfully": "ページのコピーに成功しました",
"Background color": "背景色"
}
5 changes: 3 additions & 2 deletions apps/client/public/locales/ko-KR/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,5 +386,6 @@
"Failed to share page": "페이지 공유에 실패했습니다",
"Copy page": "Copy page",
"Copy page to a different space.": "Copy page to a different space.",
"Page copied successfully": "Page copied successfully"
}
"Page copied successfully": "Page copied successfully",
"Background color": "배경 색상"
}
5 changes: 3 additions & 2 deletions apps/client/public/locales/nl-NL/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,5 +386,6 @@
"Failed to share page": "Pagina delen mislukt",
"Copy page": "Copy page",
"Copy page to a different space.": "Copy page to a different space.",
"Page copied successfully": "Page copied successfully"
}
"Page copied successfully": "Page copied successfully",
"Background color": "Achtergrondkleur"
}
9 changes: 5 additions & 4 deletions apps/client/public/locales/pt-BR/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -384,7 +384,8 @@
"Share deleted successfully": "Compartilhamento excluído com sucesso",
"Share not found": "Compartilhamento não encontrado",
"Failed to share page": "Falha ao compartilhar página",
"Copy page": "Copy page",
"Copy page to a different space.": "Copy page to a different space.",
"Page copied successfully": "Page copied successfully"
}
"Copy page": "Copiar página",
"Copy page to a different space.": "Copie a página para um espaço diferente.",
"Page copied successfully": "Página copiada com sucesso",
"Background color": "Cor de fundo"
}
5 changes: 3 additions & 2 deletions apps/client/public/locales/ru-RU/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,5 +386,6 @@
"Failed to share page": "Не удалось поделиться страницей",
"Copy page": "Копировать страницу",
"Copy page to a different space.": "Копировать страницу в другое пространство.",
"Page copied successfully": "Страница успешно скопирована"
}
"Page copied successfully": "Страница успешно скопирована",
"Background color": "Цвет фона"
}
5 changes: 3 additions & 2 deletions apps/client/public/locales/zh-CN/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,5 +386,6 @@
"Failed to share page": "页面分享失败",
"Copy page": "复制页面",
"Copy page to a different space.": "将页面复制到不同的空间。",
"Page copied successfully": "页面复制成功"
}
"Page copied successfully": "页面复制成功",
"Background color": "背景颜色"
}
144 changes: 144 additions & 0 deletions apps/client/src/features/editor/components/bubble-menu/background-color-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
import {
ActionIcon,
Button,
Popover,
rem,
ScrollArea,
Text,
Tooltip,
} from "@mantine/core";
import { IconCheck, IconPaint } from "@tabler/icons-react";
import { useEditor } from "@tiptap/react";
import { Dispatch, FC, SetStateAction } from "react";
import { useTranslation } from "react-i18next";

export interface BubbleColorMenuItem {
name: string;
color: string;
}

interface ColorSelectorProps {
editor: ReturnType<typeof useEditor>;
isOpen: boolean;
setIsOpen: Dispatch<SetStateAction<boolean>>;
}

const PASTEL_BACKGROUND_TEXT_COLORS: BubbleColorMenuItem[] = [
{
name: "Default",
color: "",
},
{
name: "Blue",
color: "#A3BFFA",
},
{
name: "Green",
color: "#A8E6A2",
},
{
name: "Purple",
color: "#D3B8F6",
},
{
name: "Red",
color: "#F4A1A1",
},
{
name: "Yellow",
color: "#FAF3A3",
},
{
name: "Orange",
color: "#FFD8A8",
},
{
name: "Pink",
color: "#F7B6D2",
},
{
name: "Gray",
color: "#D4D4D4",
},
];


export const BackgroundColorSelector: FC<ColorSelectorProps> = ({
editor,
isOpen,
setIsOpen,
}) => {
const { t } = useTranslation();
const activeColorItem = PASTEL_BACKGROUND_TEXT_COLORS.find(({ color }) =>
editor.isActive("highlight", { color }),
);

return (
<Popover width={250} opened={isOpen} withArrow>
<Popover.Target>
<Tooltip label={t("Background color")} withArrow>
<ActionIcon
variant="default"
size="lg"
radius="0"
style={{
border: "none",
color: activeColorItem?.color,
}}
onClick={() => setIsOpen(!isOpen)}
>
<IconPaint size={16} stroke={2} />
</ActionIcon>
</Tooltip>
</Popover.Target>

<Popover.Dropdown>
<ScrollArea.Autosize type="scroll" mah="400">
<Text size="xs" span c="dimmed" tt="uppercase" inherit>
{t("Background color")}
</Text>

<Button.Group orientation="vertical">
{PASTEL_BACKGROUND_TEXT_COLORS.map(({ name, color }, index) => (
<Button
key={index}
variant="default"
leftSection={(
<span
style={{
backgroundColor: color,
paddingInline: rem(4),
paddingBlock: rem(2)
}}
>
A
</span>
)}
justify="left"
fullWidth
rightSection={
editor.isActive("textStyle", { color }) && (
<IconCheck style={{ width: rem(16) }} />
)
}
onClick={() => {
editor.commands.unsetHighlight();
name !== "Default" &&
editor
.chain()
.focus()
.toggleHighlight({ color: color || "" })
.run();
setIsOpen(false);
}}
style={{ border: "none" }}
>
{t(name)}
</Button>
))}
</Button.Group>
</ScrollArea.Autosize>
</Popover.Dropdown>
</Popover>
);
};
26 changes: 22 additions & 4 deletions apps/client/src/features/editor/components/bubble-menu/bubble-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import { v7 as uuid7 } from "uuid";
import { isCellSelection, isTextSelected } from "@docmost/editor-ext";
import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector.tsx";
import { useTranslation } from "react-i18next";
import { BackgroundColorSelector } from "./background-color-selector";

export interface BubbleMenuItem {
name: string;
Expand Down Expand Up @@ -125,16 +126,18 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
onHide: () => {
setIsNodeSelectorOpen(false);
setIsTextAlignmentOpen(false);
setIsColorSelectorOpen(false);
setIsLinkSelectorOpen(false);
setIsColorSelectorOpen(false);
setIsBackgroundColorSelectorOpen(false);
},
},
};

const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
const [isTextAlignmentSelectorOpen, setIsTextAlignmentOpen] = useState(false);
const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);
const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);
const [isBackgroundColorSelectorOpen, setIsBackgroundColorSelectorOpen] = useState(false);

return (
<BubbleMenu {...bubbleMenuProps}>
Expand All @@ -145,8 +148,9 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
setIsOpen={() => {
setIsNodeSelectorOpen(!isNodeSelectorOpen);
setIsTextAlignmentOpen(false);
setIsColorSelectorOpen(false);
setIsLinkSelectorOpen(false);
setIsColorSelectorOpen(false);
setIsBackgroundColorSelectorOpen(false);
}}
/>

Expand All @@ -156,8 +160,9 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
setIsOpen={() => {
setIsTextAlignmentOpen(!isTextAlignmentSelectorOpen);
setIsNodeSelectorOpen(false);
setIsColorSelectorOpen(false);
setIsLinkSelectorOpen(false);
setIsColorSelectorOpen(false);
setIsBackgroundColorSelectorOpen(false);
}}
/>

Expand Down Expand Up @@ -188,6 +193,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
setIsNodeSelectorOpen(false);
setIsTextAlignmentOpen(false);
setIsColorSelectorOpen(false);
setIsBackgroundColorSelectorOpen(false);
}}
/>

Expand All @@ -199,6 +205,18 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
setIsNodeSelectorOpen(false);
setIsTextAlignmentOpen(false);
setIsLinkSelectorOpen(false);
setIsBackgroundColorSelectorOpen(false);
}}
/>
<BackgroundColorSelector
editor={props.editor}
isOpen={isBackgroundColorSelectorOpen}
setIsOpen={() => {
setIsBackgroundColorSelectorOpen(!isBackgroundColorSelectorOpen);
setIsNodeSelectorOpen(false);
setIsTextAlignmentOpen(false);
setIsLinkSelectorOpen(false);
setIsColorSelectorOpen(false);
}}
/>

Expand Down