joona-text v1.0.0

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
      tsconfigRootDir: import.meta.dirname,
    },
  },
});

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from "eslint-plugin-react-x";
import reactDom from "eslint-plugin-react-dom";

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    "react-x": reactX,
    "react-dom": reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs["recommended-typescript"].rules,
    ...reactDom.configs.recommended.rules,
  },
});

Rich Text Editor Component

A feature-rich text editor built with React, Slate.js, and Tailwind CSS. This component provides a modern, customizable editing experience with support for text formatting, alignment, code blocks with syntax highlighting, and more.

Features

• Text formatting (bold, italic, underline, strikethrough)
• Text alignment (left, center, right)
• Headings (3 levels)
• Lists (bulleted and numbered)
• Code blocks with syntax highlighting for multiple languages
• Block quotes
• Custom theming through CSS variables
• Responsive design
• Keyboard shortcuts

Installation

npm install slate slate-react slate-history prismjs react-icons ishotkey

Usage

import RichTextEditor from "./components/RichTextEditor";

function App() {
  return (
    <div className="h-screen p-4">
      <RichTextEditor
        height="600px"
        theme={{
          "toolbar-background": "#f8fafc",
          "toolbar-button-color": "#4b5563",
          // Add more theme variables as needed
        }}
      />
    </div>
  );
}

Props

Keyboard Shortcuts

• Cmd/Ctrl + B: Bold
• Cmd/Ctrl + I: Italic
• Cmd/Ctrl + U: Underline
• `Cmd/Ctrl + ``: Code
• Cmd/Ctrl + Shift + S: Strikethrough

Theming

You can customize the editor's appearance using CSS variables or the theme prop:

Using CSS Variables

:root {
  --rte-border-color: #e2e8f0;
  --rte-toolbar-background: #f8fafc;
  --rte-toolbar-button-color: #4b5563;
  --rte-content-background: #ffffff;
  --rte-content-text: #1f2937;
  --rte-code-background: #f8fafc;
  --rte-quote-border: #e2e8f0;
}

Using Theme Prop

<RichTextEditor
  theme={{
    "border-color": "#e2e8f0",
    "toolbar-background": "#f8fafc",
    "toolbar-button-color": "#4b5563",
    "content-background": "#ffffff",
    "content-text": "#1f2937",
    "code-background": "#f8fafc",
    "quote-border": "#e2e8f0",
  }}
/>

Supported Code Languages

The code blocks support syntax highlighting for:

• JavaScript
• TypeScript
• JSX
• TSX
• Python
• Java
• PHP
• SQL
• CSS
• Markdown

Example

import RichTextEditor from "./components/RichTextEditor";

function App() {
  const initialValue = [
    {
      type: "paragraph",
      children: [{ text: "Start typing here..." }],
    },
  ];

  return (
    <div className="container mx-auto p-4">
      <RichTextEditor
        initialValue={initialValue}
        height="600px"
        className="shadow-lg"
        theme={{
          "toolbar-background": "#f8fafc",
          "content-background": "#ffffff",
        }}
      />
    </div>
  );
}

Best Practices

1. Always provide a fixed height or make sure the parent container has a defined height
2. Use the theme prop for consistent styling across your application
3. Consider adding error boundaries around the editor for better error handling
4. Use the provided keyboard shortcuts for efficient editing

Troubleshooting

1. Editor appears small or collapsed

   • Ensure the parent container or the height prop has a defined height
   • Check if all required CSS is properly imported

2. Toolbar buttons not working

   • Make sure all dependencies are properly installed
   • Check browser console for any errors
   • Verify that the editor has focus

3. Code highlighting not working

   • Ensure Prism.js and its language components are properly imported
   • Check if the language is supported in the SUPPORTED_LANGUAGES list

4. Custom styles not applying

   • Verify that the CSS variables are properly defined
   • Check if the theme prop is correctly formatted
   • Ensure the CSS file is imported in your application

Contributing

Feel free to submit issues and enhancement requests!

JoonaText

A powerful, customizable rich text editor component for React applications.

Installation

npm install joona-text
# or
yarn add joona-text

Also ensure you have the required peer dependencies:

npm install react react-dom

Basic Usage

import React from "react";
import JoonaText from "joona-text";
import "joona-text/dist/editor.css";

function App() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">JoonaText Editor</h1>
      <JoonaText
        height="400px"
        width="100%"
        theme={{
          "toolbar-background": "#f8fafc",
          "toolbar-button-color": "#4b5563",
          "content-background": "#ffffff",
          "content-text": "#1f2937",
        }}
      />
    </div>
  );
}

export default App;

Features

• Rich Text Formatting: Bold, italic, underline, strikethrough, font size, font family, and text color
• Text Alignment: Left, center, and right alignment
• Block Elements: Headings, lists, blockquotes, and code blocks with syntax highlighting
• Media Support: Image upload, resizing, alignment, and deletion
• Advanced Features: Hovering toolbar, keyboard shortcuts, and custom theming

Documentation

For complete documentation, see Documentation.md.

License

MIT