legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: update icon sizes in text editor menu bar for consistency

Browse Source
This commit is contained in:
Ardeman 2025-03-11 10:28:48 +08:00
parent 9a2d64eee4
commit 07cced218e
1 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
app/components/text-editor/editor-menubar.tsx
View File

@ -127,7 +127,7 @@ export const EditorMenuBar = (properties: TProperties) => {
isActive={editor.isActive('bold')} isActive={editor.isActive('bold')}
title="Bold" title="Bold"
> >
<BoldIcon /> <BoldIcon className="size-4" />
</EditorButton> </EditorButton>
<EditorButton <EditorButton
onClick={() => editor.chain().focus().toggleItalic().run()} onClick={() => editor.chain().focus().toggleItalic().run()}
@ -137,7 +137,7 @@ export const EditorMenuBar = (properties: TProperties) => {
isActive={editor.isActive('italic')} isActive={editor.isActive('italic')}
title="Italic" title="Italic"
> >
<ItalicIcon /> <ItalicIcon className="size-4" />
</EditorButton> </EditorButton>
<EditorButton <EditorButton
onClick={() => editor.chain().focus().toggleStrike().run()} onClick={() => editor.chain().focus().toggleStrike().run()}
@ -147,7 +147,7 @@ export const EditorMenuBar = (properties: TProperties) => {
isActive={editor.isActive('strike')} isActive={editor.isActive('strike')}
title="Strike" title="Strike"
> >
<StrikethroughIcon /> <StrikethroughIcon className="size-4" />
</EditorButton> </EditorButton>
<div className="relative"> <div className="relative">
<EditorButton <EditorButton
@ -159,7 +159,7 @@ export const EditorMenuBar = (properties: TProperties) => {
isActive={true} isActive={true}
disabled={disabled} disabled={disabled}
> >
<SwatchIcon /> <SwatchIcon className="size-4" />
</EditorButton> </EditorButton>
{isOpenColor && ( {isOpenColor && (
<div <div
@ -191,7 +191,7 @@ export const EditorMenuBar = (properties: TProperties) => {
isActive={editor.isActive({ textAlign: 'left' })} isActive={editor.isActive({ textAlign: 'left' })}
title="Align Left" title="Align Left"
> >
<Bars3BottomLeftIcon /> <Bars3BottomLeftIcon className="size-4" />
</EditorButton> </EditorButton>
<EditorButton <EditorButton
onClick={() => editor.chain().focus().setTextAlign('center').run()} onClick={() => editor.chain().focus().setTextAlign('center').run()}
@ -202,7 +202,7 @@ export const EditorMenuBar = (properties: TProperties) => {
isActive={editor.isActive({ textAlign: 'center' })} isActive={editor.isActive({ textAlign: 'center' })}
title="Align Center" title="Align Center"
> >
<Bars3Icon /> <Bars3Icon className="size-4" />
</EditorButton> </EditorButton>
<EditorButton <EditorButton
onClick={() => editor.chain().focus().setTextAlign('right').run()} onClick={() => editor.chain().focus().setTextAlign('right').run()}
@ -213,7 +213,7 @@ export const EditorMenuBar = (properties: TProperties) => {
isActive={editor.isActive({ textAlign: 'right' })} isActive={editor.isActive({ textAlign: 'right' })}
title="Align Right" title="Align Right"
> >
<Bars3BottomRightIcon /> <Bars3BottomRightIcon className="size-4" />
</EditorButton> </EditorButton>
<EditorButton <EditorButton
onClick={() => editor.chain().focus().setTextAlign('justify').run()} onClick={() => editor.chain().focus().setTextAlign('justify').run()}
@ -224,7 +224,7 @@ export const EditorMenuBar = (properties: TProperties) => {
isActive={editor.isActive({ textAlign: 'justify' })} isActive={editor.isActive({ textAlign: 'justify' })}
title="Align Justify" title="Align Justify"
> >
<Bars4Icon /> <Bars4Icon className="size-4" />
</EditorButton> </EditorButton>
</div> </div>
<div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1"> <div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
@ -236,7 +236,7 @@ export const EditorMenuBar = (properties: TProperties) => {
title="Heading 1" title="Heading 1"
disabled={disabled} disabled={disabled}
> >
<H1Icon /> <H1Icon className="size-4" />
</EditorButton> </EditorButton>
<EditorButton <EditorButton
onClick={() => onClick={() =>
@ -246,7 +246,7 @@ export const EditorMenuBar = (properties: TProperties) => {
title="Heading 2" title="Heading 2"
disabled={disabled} disabled={disabled}
> >
<H2Icon /> <H2Icon className="size-4" />
</EditorButton> </EditorButton>
<EditorButton <EditorButton
onClick={() => onClick={() =>
@ -256,7 +256,7 @@ export const EditorMenuBar = (properties: TProperties) => {
title="Heading 3" title="Heading 3"
disabled={disabled} disabled={disabled}
> >
<H3Icon /> <H3Icon className="size-4" />
</EditorButton> </EditorButton>
{/* <EditorButton {/* <EditorButton
onClick={() => editor.chain().focus().setParagraph().run()} onClick={() => editor.chain().focus().setParagraph().run()}
@ -272,7 +272,7 @@ export const EditorMenuBar = (properties: TProperties) => {
title="Bullet List" title="Bullet List"
disabled={disabled} disabled={disabled}
> >
<ListBulletIcon /> <ListBulletIcon className="size-4" />
</EditorButton> </EditorButton>
<EditorButton <EditorButton
onClick={() => editor.chain().focus().toggleOrderedList().run()} onClick={() => editor.chain().focus().toggleOrderedList().run()}
@ -280,7 +280,7 @@ export const EditorMenuBar = (properties: TProperties) => {
title="Ordered List" title="Ordered List"
disabled={disabled} disabled={disabled}
> >
<NumberedListIcon /> <NumberedListIcon className="size-4" />
</EditorButton> </EditorButton>
<EditorButton <EditorButton
onClick={() => editor.chain().focus().toggleCodeBlock().run()} onClick={() => editor.chain().focus().toggleCodeBlock().run()}
@ -288,7 +288,7 @@ export const EditorMenuBar = (properties: TProperties) => {
title="Code Block" title="Code Block"
disabled={disabled} disabled={disabled}
> >
<CodeBracketIcon /> <CodeBracketIcon className="size-4" />
</EditorButton> </EditorButton>
</div> </div>
{/* <div className="flex items-start gap-1 px-1"> {/* <div className="flex items-start gap-1 px-1">
@ -334,7 +334,7 @@ export const EditorMenuBar = (properties: TProperties) => {
title="Insert Image" title="Insert Image"
disabled={disabled} disabled={disabled}
> >
<PhotoIcon /> <PhotoIcon className="size-4" />
</EditorButton> </EditorButton>
{isOpenImage && ( {isOpenImage && (
<div <div
@ -380,14 +380,14 @@ export const EditorMenuBar = (properties: TProperties) => {
isActive={editor.isActive('link')} isActive={editor.isActive('link')}
title="Set Link" title="Set Link"
> >
<LinkIcon /> <LinkIcon className="size-4" />
</EditorButton> </EditorButton>
<EditorButton <EditorButton
onClick={() => editor.chain().focus().unsetLink().run()} onClick={() => editor.chain().focus().unsetLink().run()}
disabled={disabled || !editor.isActive('link')} disabled={disabled || !editor.isActive('link')}
title="Unset Link" title="Unset Link"
> >
<LinkSlashIcon /> <LinkSlashIcon className="size-4" />
</EditorButton> </EditorButton>
</div> </div>
<div className="flex items-start gap-1 px-1"> <div className="flex items-start gap-1 px-1">
@ -396,14 +396,14 @@ export const EditorMenuBar = (properties: TProperties) => {
disabled={disabled || !editor.can().chain().focus().undo().run()} disabled={disabled || !editor.can().chain().focus().undo().run()}
title="Undo" title="Undo"
> >
<ArrowUturnLeftIcon /> <ArrowUturnLeftIcon className="size-4" />
</EditorButton> </EditorButton>
<EditorButton <EditorButton
onClick={() => editor.chain().focus().redo().run()} onClick={() => editor.chain().focus().redo().run()}
disabled={disabled || !editor.can().chain().focus().redo().run()} disabled={disabled || !editor.can().chain().focus().redo().run()}
title="Redo" title="Redo"
> >
<ArrowUturnRightIcon /> <ArrowUturnRightIcon className="size-4" />
</EditorButton> </EditorButton>
</div> </div>
</div> </div>
@ -413,7 +413,7 @@ export const EditorMenuBar = (properties: TProperties) => {
onClick={() => setIsPlainHTML(true)} onClick={() => setIsPlainHTML(true)}
title="Switch to Plain Text" title="Switch to Plain Text"
> >
<DocumentTextIcon /> <DocumentTextIcon className="size-4" />
</EditorButton> </EditorButton>
</div> </div>
</div> </div>