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

feat: update editor menubar icons and add clear format functionality

Browse Source
This commit is contained in:
Ardeman 2025-03-14 17:43:54 +08:00
parent 5c20cc48ab
commit deb2004039
4 changed files with 55 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,6 @@ import {
Bars3BottomLeftIcon,
Bars3BottomRightIcon,
Bars3Icon,
Bars4Icon,
BoldIcon,
CloudArrowUpIcon,
CodeBracketIcon,
@ -21,7 +20,12 @@ import {
PhotoIcon,
StrikethroughIcon,
SwatchIcon,
XCircleIcon,
} from '@heroicons/react/20/solid'
import {
Bars3BottomCenterIcon,
QuotationMarkIcon,
} from '@sidekickicons/react/24/solid'
import type { Editor } from '@tiptap/react'
import {
type SetStateAction,
@ -202,7 +206,7 @@ export const EditorMenuBar = (properties: TProperties) => {
isActive={editor.isActive({ textAlign: 'center' })}
title="Align Center"
>
<Bars3Icon className="size-4" />
<Bars3BottomCenterIcon className="size-4" />
</EditorButton>
<EditorButton
onClick={() => editor.chain().focus().setTextAlign('right').run()}
@ -224,7 +228,7 @@ export const EditorMenuBar = (properties: TProperties) => {
isActive={editor.isActive({ textAlign: 'justify' })}
title="Align Justify"
>
<Bars4Icon className="size-4" />
<Bars3Icon className="size-4" />
</EditorButton>
</div>
<div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
@ -258,14 +262,14 @@ export const EditorMenuBar = (properties: TProperties) => {
>
<H3Icon className="size-4" />
</EditorButton>
{/* <EditorButton
onClick={() => editor.chain().focus().setParagraph().run()}
isActive={editor.isActive('paragraph')}
title="Paragraph"
disabled={disabled}
>
<RiParagraph />
</EditorButton> */}
<EditorButton
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
isActive={editor.isActive('codeBlock')}
title="Code Block"
disabled={disabled}
>
<CodeBracketIcon className="size-4" />
</EditorButton>
<EditorButton
onClick={() => editor.chain().focus().toggleBulletList().run()}
isActive={editor.isActive('bulletList')}
@ -282,32 +286,40 @@ export const EditorMenuBar = (properties: TProperties) => {
>
<NumberedListIcon className="size-4" />
</EditorButton>
<EditorButton
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
isActive={editor.isActive('codeBlock')}
title="Code Block"
{/* <EditorButton
onClick={() => editor.chain().focus().setParagraph().run()}
isActive={editor.isActive('paragraph')}
title="Paragraph"
disabled={disabled}
>
<CodeBracketIcon className="size-4" />
<PilcrowIcon className="size-4" />
</EditorButton> */}
<EditorButton
onClick={() => editor.chain().focus().toggleBlockquote().run()}
isActive={editor.isActive('blockquote')}
title="Blockquote"
disabled={disabled}
>
<QuotationMarkIcon className="size-4" />
</EditorButton>
</div>
{/* <div className="flex items-start gap-1 px-1">
<EditorButton
onClick={() => editor.chain().focus().toggleBlockquote().run()}
isActive={editor.isActive('blockquote')}
title="Blockquote"
disabled={disabled}
>
<RiDoubleQuotesL />
</EditorButton>
<EditorButton
<EditorButton
onClick={() => {
editor.chain().focus().unsetAllMarks().run()
editor.chain().focus().clearNodes().run()
}}
title="Clear Format"
disabled={disabled}
>
<XCircleIcon className="size-4" />
</EditorButton>
{/* <EditorButton
onClick={() => editor.chain().focus().setHorizontalRule().run()}
title="Horizontal Rule"
disabled={disabled}
>
<RiSeparator />
</EditorButton>
</div> */}
</EditorButton> */}
</div>
{/* <div className="flex items-start gap-1 px-1">
<EditorButton
onClick={() => editor.chain().focus().setHardBreak().run()}
@ -316,16 +328,6 @@ export const EditorMenuBar = (properties: TProperties) => {
>
<RiTextWrap />
</EditorButton>
<EditorButton
onClick={() => {
editor.chain().focus().unsetAllMarks().run()
editor.chain().focus().clearNodes().run()
}}
title="Clear Format"
disabled={disabled}
>
<RiFormatClear />
</EditorButton>
</div> */}
<div className="flex items-start gap-1 px-1">
<div className="relative">

2
app/components/ui/combobox.tsx
View File

@ -96,7 +96,7 @@ export const Combobox = <TFormValues extends Record<string, unknown>>(
displayValue={(option: TComboboxOption) => option?.name}
onChange={(event) => setQuery(event.target.value)}
className={twMerge(
'focus:inheriten h-[42px] w-full rounded-md border border-[#DFDFDF] p-2',
'focus:inheriten h-[42px] w-full rounded-md border border-[#DFDFDF] p-2 placeholder:text-inherit',
className,
)}
/>

1
package.json
View File

@ -21,6 +21,7 @@
"@react-router/fs-routes": "^7.1.3",
"@react-router/node": "^7.1.3",
"@react-router/serve": "^7.1.3",
"@sidekickicons/react": "^0.12.0",
"@tiptap/extension-color": "^2.11.5",
"@tiptap/extension-highlight": "^2.11.5",
"@tiptap/extension-image": "^2.11.5",

12
pnpm-lock.yaml generated
View File

@ -29,6 +29,9 @@ importers:
'@react-router/serve':
specifier: ^7.1.3
version: 7.1.3(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(typescript@5.7.3)
'@sidekickicons/react':
specifier: ^0.12.0
version: 0.12.0(react@19.0.0)
'@tiptap/extension-color':
specifier: ^2.11.5
version: 2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5))(@tiptap/extension-text-style@2.11.5(@tiptap/core@2.11.5(@tiptap/pm@2.11.5)))
@ -1381,6 +1384,11 @@ packages:
'@rtsao/scc@1.1.0':
resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
'@sidekickicons/react@0.12.0':
resolution: {integrity: sha512-cwl76tv4cSXoqGuPb5WpOCSLhS6Wsm90YeFqlVzR0Gwna+q6BbD414UalLfX/1fhsz+jDIPDs3E94BpZNAiMvA==}
peerDependencies:
react: '>= 16 || ^19.0.0-rc'
'@snyk/github-codeowners@1.1.0':
resolution: {integrity: sha512-lGFf08pbkEac0NYgVf4hdANpAgApRjNByLXB+WBip3qj1iendOIyAwP2GKkKbQMNVy2r1xxDf0ssfWscoiC+Vw==}
engines: {node: '>=8.10'}
@ -6004,6 +6012,10 @@ snapshots:
'@rtsao/scc@1.1.0': {}
'@sidekickicons/react@0.12.0(react@19.0.0)':
dependencies:
react: 19.0.0
'@snyk/github-codeowners@1.1.0':
dependencies:
commander: 4.1.1