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

Signed-off-by: Émile Ré <emile@getprobo.com>

packages/ui/src/RichEditor/BlockMenu/BlockMenuTrigger.tsx

@@ -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>
   );
 }

packages/ui/src/RichEditor/BlockMenu/variants.ts

@@ -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"],

packages/ui/src/RichEditor/OptionsMenu/OptionsMenuTrigger.tsx

@@ -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>
   );
 }

packages/ui/src/RichEditor/OptionsMenu/variants.ts

@@ -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"],

packages/ui/src/RichEditor/RichEditor.tsx

@@ -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
         && (
           <>

packages/ui/src/RichEditor/TableColumnMenu/TableColumnMenuTrigger.tsx

@@ -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, {

packages/ui/src/RichEditor/TableColumnMenu/variants.ts

@@ -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"],
   },

packages/ui/src/RichEditor/TableRowMenu/TableRowMenuTrigger.tsx

@@ -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, {

packages/ui/src/RichEditor/TableRowMenu/variants.ts

@@ -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"],
   },