mirror of
https://github.com/Mail-0/Zero.git
synced 2026-07-01 08:16:28 +00:00
277f476575
Ran oxc (https://oxc.rs/docs/guide/usage/linter.html#vscode-extension) and fixed all the issues that came up, set it up to run as a PR check and added steps to the README.md asking users to use it. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Introduced JavaScript linting using oxlint in development guidelines and CI workflow for improved code quality. * Added oxlint configuration and dependencies to the project. * **Bug Fixes** * Improved error logging in various components and utilities for better debugging. * Enhanced React list rendering by updating keys to use unique values instead of array indices, reducing rendering issues. * Replaced browser alerts with toast notifications for a smoother user experience. * **Refactor** * Simplified component logic and state management by removing unused code, imports, props, and components across multiple files. * Updated function and component signatures for clarity and maintainability. * Improved efficiency of certain operations by switching from arrays to sets for membership checks. * **Chores** * Cleaned up and reorganized import statements throughout the codebase. * Removed deprecated files, components, and middleware to streamline the codebase. * **Documentation** * Updated contribution guidelines to include linting requirements for code submissions. * **Style** * Minor formatting and readability improvements in JSX and code structure. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon } from 'lucide-react';
|
|
import type { SelectorItem } from './editor.node-selector';
|
|
import { EditorBubbleItem, useEditor } from 'novel';
|
|
import { Button } from '@/components/ui/button';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export const TextButtons = () => {
|
|
const { editor } = useEditor();
|
|
if (!editor) return null;
|
|
const items: SelectorItem[] = [
|
|
{
|
|
name: 'bold',
|
|
isActive: (editor) => editor.isActive('bold'),
|
|
command: (editor) => editor.chain().focus().toggleBold().run(),
|
|
icon: BoldIcon,
|
|
},
|
|
{
|
|
name: 'italic',
|
|
isActive: (editor) => editor.isActive('italic'),
|
|
command: (editor) => editor.chain().focus().toggleItalic().run(),
|
|
icon: ItalicIcon,
|
|
},
|
|
{
|
|
name: 'underline',
|
|
isActive: (editor) => editor.isActive('underline'),
|
|
command: (editor) => editor.chain().focus().toggleUnderline().run(),
|
|
icon: UnderlineIcon,
|
|
},
|
|
{
|
|
name: 'strike',
|
|
isActive: (editor) => editor.isActive('strike'),
|
|
command: (editor) => editor.chain().focus().toggleStrike().run(),
|
|
icon: StrikethroughIcon,
|
|
},
|
|
{
|
|
name: 'code',
|
|
isActive: (editor) => editor.isActive('code'),
|
|
command: (editor) => editor.chain().focus().toggleCode().run(),
|
|
icon: CodeIcon,
|
|
},
|
|
];
|
|
return (
|
|
<div className="flex">
|
|
{items.map((item) => (
|
|
<EditorBubbleItem
|
|
key={item.name}
|
|
onSelect={(editor) => {
|
|
item.command(editor);
|
|
}}
|
|
>
|
|
<Button size="icon" className="rounded-none" variant="ghost">
|
|
<item.icon
|
|
className={cn('h-4 w-4', {
|
|
'text-blue-500': item.isActive(editor),
|
|
})}
|
|
/>
|
|
</Button>
|
|
</EditorBubbleItem>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|