Editer-plugin-react NPM

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