Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-14 00:32:35 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: wrap rich input toolbar, closes #1588

Browse Source
This commit is contained in:
Amruth Pillai
2023-11-26 15:26:39 +01:00
parent bf9cd2b248
commit 9298a7473e
2 changed files with 273 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/client/src/pages/builder/layout.tsx
View File

@ -41,8 +41,8 @@ export const BuilderLayout = () => {
<PanelGroup direction="horizontal">
<Panel
minSizePixels={48}
maxSizePercentage={35}
defaultSizePercentage={28}
maxSizePercentage={45}
defaultSizePercentage={30}
onResize={({ sizePercentage }) => leftSetSize(sizePercentage)}
className={cn("z-10 bg-background", !leftHandle.isDragging && "transition-[flex]")}
>
@ -61,8 +61,8 @@ export const BuilderLayout = () => {
/>
<Panel
minSizePixels={48}
maxSizePercentage={35}
defaultSizePercentage={28}
maxSizePercentage={45}
defaultSizePercentage={30}
onResize={({ sizePercentage }) => rightSetSize(sizePercentage)}
className={cn("z-10 bg-background", !rightHandle.isDragging && "transition-[flex]")}
>

28
libs/ui/src/components/rich-input.tsx
View File

@ -43,8 +43,6 @@ import { Button } from "./button";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "./form";
import { Input } from "./input";
import { Popover, PopoverContent } from "./popover";
import { ScrollArea } from "./scroll-area";
import { Separator } from "./separator";
import { Skeleton } from "./skeleton";
import { Toggle } from "./toggle";
import { Tooltip } from "./tooltip";
@ -137,9 +135,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
}, [editor]);
return (
<div className="absolute inset-x-0 top-2 px-2">
<ScrollArea orientation="horizontal">
<div className="flex h-8 gap-1">
<div className="flex flex-wrap gap-0.5 border p-1">
<Tooltip content="Bold">
<Toggle
size="sm"
@ -201,8 +197,6 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
</Button>
</Tooltip>
<Separator orientation="vertical" className="mx-1" />
<Tooltip content="Inline Code">
<Toggle
size="sm"
@ -225,8 +219,6 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
</Toggle>
</Tooltip>
<Separator orientation="vertical" className="mx-1" />
<Tooltip content="Heading 1">
<Toggle
size="sm"
@ -270,8 +262,6 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
</Toggle>
</Tooltip>
<Separator orientation="vertical" className="mx-1" />
<Tooltip content="Align Left">
<Toggle
size="sm"
@ -316,8 +306,6 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
</Toggle>
</Tooltip>
<Separator orientation="vertical" className="mx-1" />
<Tooltip content="Bullet List">
<Toggle
size="sm"
@ -364,14 +352,14 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
</Button>
</Tooltip>
<Separator orientation="vertical" className="mx-1" />
<Popover>
<Tooltip content="Insert Image">
<PopoverTrigger asChild>
<Button size="sm" variant="ghost" className="px-2">
<ImageIcon />
</Button>
</PopoverTrigger>
</Tooltip>
<PopoverContent className="w-80">
<InsertImageForm onInsert={(props) => editor.chain().focus().setImage(props).run()} />
</PopoverContent>
@ -401,8 +389,6 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
</Button>
</Tooltip>
<Separator orientation="vertical" className="mx-1" />
<Tooltip content="Undo">
<Button
size="sm"
@ -427,10 +413,6 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
</Button>
</Tooltip>
</div>
</ScrollArea>
<Separator className="mt-2" />
</div>
);
};
@ -484,13 +466,13 @@ export const RichInput = forwardRef<Editor, RichInputProps>(
}
return (
<div className="relative">
<div>
{!hideToolbar && <Toolbar editor={editor} />}
<EditorContent
editor={editor}
className={cn(
"grid min-h-[160px] w-full rounded-sm border bg-transparent px-3 pb-2 pt-14 text-sm placeholder:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50",
"grid min-h-[160px] w-full rounded-sm border bg-transparent px-3 py-2 text-sm placeholder:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50",
hideToolbar && "pt-2",
className,
)}