React + TypeScript + Vite

editer-plugin-react is a lightweight text editor package built with React and TypeScript, designed to be used with Vite for a fast and efficient development experience. This package leverages modern tools like Vite, React, and TypeScript to provide a seamless and performant text editing solution.

• Built with React and TypeScript
• Fast development with Vite
• Supports HMR (Hot Module Replacement)
• ESLint integration for consistent code quality

Installation

To install editer-plugin-react, run the following command:

  npm install editer-plugin-react

Usage

Here is a basic example of how to use the editer-plugin-react in your project:

  import { DefaultEditor, CharacterNumber, FloatingEditor } from 'editer-plugin-react';

  function App() {
  const [content] = useState<string>(`Hello World`)
  const [editors, setEditor ] = useState<any[]>(['default']);
  const options = ['default', 'bubble', 'fixed', 'floating'];

  const getHtml = (html: string) => {
    console.log('html',html)
  }

  // Other rules...

  return (
    <>
    <div>
      { editors.includes('default') &&
        <DefaultEditor content={content} onUpdate={getHtml}/>
      }
    </div>
    </>
  )
}

export default App

Development Setup

If you want to develop and extend this package, follow the instructions below:

• Install dependencies:

npm i editer-plugin-react

• Start the development server:

npm run dev

Props

EditerPluginReact Props

| Prop Name | Type | Default | Description | |------------------|---------|-----------------|------------------------------------------| | content | string| Hello World | The initial content of the text editor. | | onUpdateValue | any | | return value of editor. | | `onUpdate` | `any` | | return value of editor. |

Dependencies

• react: ^18.2.0
• react-dom: ^18.2.0

DevDependencies

• vite: ^5.2.0
• typescript: ^5.2.2
• eslint: ^8.57.0

Contributing

Contributions are welcome! Please open an issue or submit a pull request if you have any improvements or fixes.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list