zonaet-my-ui-components

A modern React component library with a full-featured rich text editor powered by Plate.js.

🚀 Quick Start

npm install zonaet-my-ui-components

⚠️ CRITICAL FOR PLATELITEEDITOR: The editor requires CSS to be imported. Add this to your app:

// In app/layout.tsx or pages/_app.tsx
import "zonaet-my-ui-components/styles.css";

Without this, the editor will appear unstyled. See EDITOR_STYLES_FIX.md for details.

📦 What's Included

• PlateLiteEditor - Full-featured rich text editor with:
  • Text formatting (bold, italic, underline, etc.)
  • Headings, lists, and block quotes
  • Code blocks with syntax highlighting
  • Tables, images, and media
  • Mentions, comments, and more
• Button - Customizable button component
• Card - Card component for layouts

🎯 Installation for Next.js

1. Install Package

npm install zonaet-my-ui-components

2. Import CSS (CRITICAL!)

Add this import to your app/layout.tsx or pages/_app.tsx:

import "zonaet-my-ui-components/styles.css";

This is required for PlateLiteEditor to display correctly!

3. Install Dependencies

npm install platejs lowlight lucide-react @radix-ui/react-toolbar
npm install class-variance-authority clsx tailwind-merge

4. Use the Editor

"use client";

import { PlateLiteEditor } from "zonaet-my-ui-components";
import { useState } from "react";

export function MyEditor() {
  const [value, setValue] = useState([
    { type: "p", children: [{ text: "Start typing..." }] },
  ]);

  return <PlateLiteEditor value={value} onChange={setValue} />;
}

📚 Documentation

• QUICK_START.md - Get started in 3 minutes
• STYLING_SETUP.md - Fix styling issues
• NEXTJS_SETUP.md - Complete Next.js integration guide
• PACKAGE_README.md - Full API documentation

🐛 Troubleshooting

Editor has no styling / appears broken

Fix: Import the CSS file in your app:

import "zonaet-my-ui-components/styles.css";

See EDITOR_STYLES_FIX.md for detailed instructions.

"createLowlight is not a function"

Fix: Install lowlight: npm install lowlight

Button and Card work but Editor doesn't

This confirms the issue is missing CSS import. See EDITOR_STYLES_FIX.md.

🔧 Development

Build the package:

npm run build

📄 License

MIT