rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update rich editor style to be lighter and closer to printed doc

Browse Source 
Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-04-03 16:40:35 +04:00
parent 6d1a7c846d
commit 5359fe9931
13 changed files with 118 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/console/src/pages/organizations/documents/description/DocumentDescriptionPage.tsx
View File

@@ -124,6 +124,7 @@ export function DocumentDescriptionPage(props: { queryRef: PreloadedQuery<Docume
<RichEditor
className="flex-1"
content={currentVersion.content}
data-theme="document"
disabled={currentVersion.status !== "DRAFT"}
onChangeContent={handleUpdate}
/>

2
packages/ui/src/Layouts/Layout.tsx
View File

@@ -85,7 +85,7 @@ export function Layout({
hasDrawer && "pr-105",
)}
>
<div className="py-12 px-8 max-w-[1200px] w-full mx-auto h-full">
<div className="py-12 px-8 max-w-[1200px] w-full mx-auto min-h-[calc(100vh-48px)]">
{children}
</div>
</main>

4
packages/ui/src/RichEditor/BlockMenu/BlockMenuTrigger.tsx
View File

@@ -19,7 +19,7 @@ type BlockMenuTriggerProps = {
};
export function BlockMenuTrigger({ editor, hoveredBlock }: BlockMenuTriggerProps) {
const { triggerRefs, triggerStyles, isPositioned } = useBlockTrigger(hoveredBlock, 40);
const { triggerRefs, triggerStyles, isPositioned } = useBlockTrigger(hoveredBlock, 32);
const handleTriggerClick = () => {
try {
@@ -81,7 +81,7 @@ export function BlockMenuTrigger({ editor, hoveredBlock }: BlockMenuTriggerProps
}}
className={trigger()}
>
<PlusIcon size={16} weight="bold" />
<PlusIcon size={14} weight="bold" />
</button>
);
}

2
packages/ui/src/RichEditor/BlockMenu/variants.ts
View File

@@ -7,7 +7,7 @@ import { tv } from "tailwind-variants";
export const blockMenuVariants = tv({
slots: {
trigger: [
"z-20 flex size-6 items-center justify-center",
"z-20 flex size-5 items-center justify-center",
"rounded text-txt-tertiary hover:bg-subtle hover:text-txt-primary text-xl font-light cursor-pointer",
],
menu: ["rounded-lg border border-border-mid bg-level-0 p-1 shadow-mid z-30"],

4
packages/ui/src/RichEditor/OptionsMenu/OptionsMenuTrigger.tsx
View File

@@ -37,7 +37,7 @@ export function OptionsMenuTrigger({
menuRefs,
getReferenceProps,
}: OptionsMenuTriggerProps) {
const { triggerRefs, triggerStyles, isPositioned } = useBlockTrigger(hoveredBlock, 16);
const { triggerRefs, triggerStyles, isPositioned } = useBlockTrigger(hoveredBlock, 12);
const onDragStart = (e: DragEvent<HTMLButtonElement>) => {
if (!hoveredBlock) return;
@@ -91,7 +91,7 @@ export function OptionsMenuTrigger({
}}
className={trigger()}
>
<DotsSixVerticalIcon size={20} weight="bold" />
<DotsSixVerticalIcon size={16} weight="bold" />
</button>
);
}

2
packages/ui/src/RichEditor/OptionsMenu/variants.ts
View File

@@ -7,7 +7,7 @@ import { tv } from "tailwind-variants";
export const optionsMenuVariants = tv({
slots: {
trigger: [
"z-20 flex size-6 items-center justify-center",
"z-20 flex size-5 items-center justify-center",
"rounded text-txt-tertiary hover:bg-subtle hover:text-txt-primary cursor-grab",
],
menu: ["rounded-lg border border-border-mid bg-level-0 p-1 shadow-mid z-30"],

8
packages/ui/src/RichEditor/RichEditor.tsx
View File

@@ -67,10 +67,10 @@ const extensions = [
];
const richEditorVariants = tv({
base: ["relative flex-1 pb-14"],
base: ["relative flex-1 py-14 pr-8 bg-level-1 shadow-base"],
variants: {
disabled: {
true: "",
true: "pl-8",
false: "pl-14",
},
},
@@ -83,7 +83,7 @@ type RichEditorProps = ComponentProps<"div"> & {
};
export function RichEditor(props: RichEditorProps) {
const { className, content, disabled = false, onChangeContent } = props;
const { className, content, disabled = false, onChangeContent, ...divProps } = props;
const handleUpdate = useCallback(
({ editor }: { editor: Editor }) => {
@@ -112,7 +112,7 @@ export function RichEditor(props: RichEditorProps) {
if (!editor) return null;
return (
<div className={richEditorVariants({ className, disabled })}>
<div className={richEditorVariants({ className, disabled })} {...divProps}>
{!disabled
&& (
<>

2
packages/ui/src/RichEditor/TableColumnMenu/TableColumnMenuTrigger.tsx
View File

@@ -145,7 +145,7 @@ export function TableColumnMenuTrigger({
strategy: "fixed",
placement: "top",
middleware: [
offset(6),
offset(4),
size({
apply({ rects, elements }) {
Object.assign(elements.floating.style, {

2
packages/ui/src/RichEditor/TableColumnMenu/variants.ts
View File

@@ -9,7 +9,7 @@ export const tableColumnMenuVariants = tv({
trigger: [
"z-20 flex items-center justify-center",
"rounded text-txt-tertiary bg-subtle hover:bg-border-solid cursor-grab",
"py-0.5 h-3",
"py-0.5 h-2",
],
menu: ["rounded-lg border border-border-mid bg-level-0 p-1 shadow-mid z-30"],
},

2
packages/ui/src/RichEditor/TableRowMenu/TableRowMenuTrigger.tsx
View File

@@ -145,7 +145,7 @@ export function TableRowMenuTrigger({
strategy: "fixed",
placement: "left",
middleware: [
offset(6),
offset(4),
size({
apply({ rects, elements }) {
Object.assign(elements.floating.style, {

2
packages/ui/src/RichEditor/TableRowMenu/variants.ts
View File

@@ -9,7 +9,7 @@ export const tableRowMenuVariants = tv({
trigger: [
"z-20 flex flex-col items-center justify-center",
"rounded text-txt-tertiary bg-subtle hover:bg-border-solid cursor-grab",
"px-0.5 w-3",
"px-0.5 w-2",
],
menu: ["rounded-lg border border-border-mid bg-level-0 p-1 shadow-mid z-30"],
},

4
packages/ui/src/rich-editor.css
View File

@@ -6,7 +6,7 @@
.tiptap {
p {
@apply my-2 min-w-0.5;
@apply my-2 min-w-0.5 font-light text-sm;
code { @apply py-0.5 px-1; }
}
@@ -68,7 +68,7 @@
}
th {
@apply px-2 py-1.5 border border-border-mid border-collapse bg-subtle text-left font-semibold relative;
p { @apply m-0; }
p { @apply m-0 font-medium; }
}
td {
@apply px-2 py-1.5 border border-border-mid border-collapse bg-level-0 text-left relative;

167
packages/ui/src/theme.css
View File

@@ -171,79 +171,112 @@
0px 2px 12px 0px rgba(0, 0, 0, 0.06);
}
@media (prefers-color-scheme: dark) {
:root {
--color-level-0: #151715;
--color-level-1: #1a1d19;
--color-level-2: #20241f;
--color-level-3: #3b3f3a;
@custom-variant document (&:where([data-theme=document] *));
--color-black: #ffffff;
@layer theme {
:root, :host {
@variant dark {
--color-level-0: #151715;
--color-level-1: #1a1d19;
--color-level-2: #20241f;
--color-level-3: #3b3f3a;
/* Text colors */
--color-txt-primary: #eceeec;
--color-invert: #151715;
--color-txt-invert: #fcfdfc;
--color-txt-secondary: #9aa299;
--color-txt-tertiary: #778175;
--color-txt-quaternary: #4c514b;
--color-txt-disabled: #3b3f3a;
--color-txt-accent: #c4f042;
--color-txt-danger: #ff6369;
--color-txt-success: rgba(181, 255, 44, 0.72);
--color-txt-info: #52a9ff;
--color-txt-warning: #f1a10d;
--color-black: #ffffff;
/* Backgrounds */
--color-primary: #c4f042;
--color-invert: #151715;
--color-secondary: rgba(214, 251, 196, 0.06);
--color-tertiary: rgba(255, 255, 255, 0);
--color-subtle: rgba(213, 254, 175, 0.03);
--color-highlight: rgba(214, 251, 196, 0.06);
--color-active: rgba(239, 254, 226, 0.08);
--color-accent: #c4f042;
--color-danger: rgba(254, 58, 61, 0.13);
--color-danger-plain: rgba(254, 58, 61, 0.13);
--color-danger-dark: rgba(255, 89, 95, 0.94);
--color-success: rgba(184, 253, 106, 0.06);
--color-info: rgba(22, 119, 254, 0.14);
--color-warning: rgba(254, 115, 0, 0.09);
--color-dialog: #151715;
/* Text colors */
--color-txt-primary: #eceeec;
--color-invert: #151715;
--color-txt-invert: #fcfdfc;
--color-txt-secondary: #9aa299;
--color-txt-tertiary: #778175;
--color-txt-quaternary: #4c514b;
--color-txt-disabled: #3b3f3a;
--color-txt-accent: #c4f042;
--color-txt-danger: #ff6369;
--color-txt-success: rgba(181, 255, 44, 0.72);
--color-txt-info: #52a9ff;
--color-txt-warning: #f1a10d;
/* Borders */
--color-border-solid: rgba(239, 254, 226, 0.08);
--color-border-low: rgba(239, 254, 226, 0.08);
--color-border-mid: rgba(233, 254, 223, 0.1);
--color-border-strong: rgba(241, 255, 237, 0.25);
--color-border-active: rgba(253, 255, 253, 0.93);
--color-border-accent: #c4f042;
--color-border-danger: #f2555a;
--color-border-success: #c4f042;
--color-border-warning: #ffcb47;
--color-border-info: #369eff;
/* Backgrounds */
--color-primary: #c4f042;
--color-invert: #151715;
--color-secondary: rgba(214, 251, 196, 0.06);
--color-tertiary: rgba(255, 255, 255, 0);
--color-subtle: rgba(213, 254, 175, 0.03);
--color-highlight: rgba(214, 251, 196, 0.06);
--color-active: rgba(239, 254, 226, 0.08);
--color-accent: #c4f042;
--color-danger: rgba(254, 58, 61, 0.13);
--color-danger-plain: rgba(254, 58, 61, 0.13);
--color-danger-dark: rgba(255, 89, 95, 0.94);
--color-success: rgba(184, 253, 106, 0.06);
--color-info: rgba(22, 119, 254, 0.14);
--color-warning: rgba(254, 115, 0, 0.09);
--color-dialog: #151715;
/* Hover */
--color-primary-hover: rgba(196, 240, 66, 0.88);
--color-invert-hover: #1a1d19;
--color-secondary-hover: rgba(214, 251, 196, 0.06);
--color-tertiary-hover: rgba(213, 254, 175, 0.03);
--color-subtle-hover: rgba(214, 251, 196, 0.06);
--color-highlight-hover: rgba(233, 254, 223, 0.1);
--color-accent-hover: rgba(183, 255, 50, 0.82);
--color-active-hover: rgba(233, 254, 223, 0.1);
--color-danger-hover: rgba(254, 58, 61, 0.7);
/* Borders */
--color-border-solid: rgba(239, 254, 226, 0.08);
--color-border-low: rgba(239, 254, 226, 0.08);
--color-border-mid: rgba(233, 254, 223, 0.1);
--color-border-strong: rgba(241, 255, 237, 0.25);
--color-border-active: rgba(253, 255, 253, 0.93);
--color-border-accent: #c4f042;
--color-border-danger: #f2555a;
--color-border-success: #c4f042;
--color-border-warning: #ffcb47;
--color-border-info: #369eff;
/* Pressed */
--color-primary-pressed: rgba(196, 240, 66, 0.84);
--color-invert-pressed: #20241f;
--color-secondary-pressed: rgba(239, 254, 226, 0.08);
--color-tertiary-pressed: rgba(214, 251, 196, 0.06);
--color-subtle-pressed: rgba(239, 254, 226, 0.08);
--color-highlight-pressed: rgba(236, 254, 229, 0.13);
--color-accent-pressed: rgba(209, 255, 70, 0.94);
--color-active-pressed: rgba(236, 254, 229, 0.13);
--color-danger-pressed: rgba(254, 58, 61, 0.5);
/* Hover */
--color-primary-hover: rgba(196, 240, 66, 0.88);
--color-invert-hover: #1a1d19;
--color-secondary-hover: rgba(214, 251, 196, 0.06);
--color-tertiary-hover: rgba(213, 254, 175, 0.03);
--color-subtle-hover: rgba(214, 251, 196, 0.06);
--color-highlight-hover: rgba(233, 254, 223, 0.1);
--color-accent-hover: rgba(183, 255, 50, 0.82);
--color-active-hover: rgba(233, 254, 223, 0.1);
--color-danger-hover: rgba(254, 58, 61, 0.7);
/* Pressed */
--color-primary-pressed: rgba(196, 240, 66, 0.84);
--color-invert-pressed: #20241f;
--color-secondary-pressed: rgba(239, 254, 226, 0.08);
--color-tertiary-pressed: rgba(214, 251, 196, 0.06);
--color-subtle-pressed: rgba(239, 254, 226, 0.08);
--color-highlight-pressed: rgba(236, 254, 229, 0.13);
--color-accent-pressed: rgba(209, 255, 70, 0.94);
--color-active-pressed: rgba(236, 254, 229, 0.13);
--color-danger-pressed: rgba(254, 58, 61, 0.5);
}
}
* {
@variant document {
--text-4xl: 16pt;
--text-4xl--line-height: 21pt;
--text-4xl--letter-spacing: -0.6px;
--text-3xl: 15pt;
--text-3xl--line-height: 21pt;
--text-3xl--letter-spacing: -0.4px;
--text-2xl: 14pt;
--text-2xl--line-height: 21pt;
--text-2xl--letter-spacing: 0;
--text-xl: 13pt;
--text-xl--line-height: 18pt;
--text-xl--letter-spacing: 0;
--text-lg: 12pt;
--text-lg--line-height: 18pt;
--text-lg--letter-spacing: 0;
--text-base: 11pt;
--text-base--line-height: 18pt;
--text-base--letter-spacing: 0;
--text-sm: 10pt;
--text-sm--line-height: 15pt;
--text-sm--letter-spacing: 0;
--text-xs: 9pt;
--text-xs--line-height: 15pt;
--text-xs--letter-spacing: 0;
}
}
}