@anilkumarteach/editor-ak 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +86 -45
  2. package/package.json +4 -1
package/README.md CHANGED
@@ -1,73 +1,114 @@
1
- # Welcome to your Lovable project
1
+ # @anilkumarteach/editor-ak
2
2
 
3
- ## Project info
3
+ A modern **Rich Text Editor for React**, built with **TypeScript** and **Vite**.
4
+ This package exposes a **single, clean component**: `<RichTextEditor />`.
4
5
 
5
- **URL**: https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID
6
+ It is designed to be easy to install, simple to use, and production-ready.
6
7
 
7
- ## How can I edit this code?
8
+ ---
8
9
 
9
- There are several ways of editing your application.
10
+ ## 📌 What is this package?
10
11
 
11
- **Use Lovable**
12
+ `@anilkumarteach/editor-ak` provides a ready-to-use rich text editor that you can plug into any React app without configuring complex editor logic.
12
13
 
13
- Simply visit the [Lovable Project](https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID) and start prompting.
14
+ You only import **one component** and start using it.
14
15
 
15
- Changes made via Lovable will be committed automatically to this repo.
16
+ ---
16
17
 
17
- **Use your preferred IDE**
18
+ ## ✨ Features (Step by Step)
18
19
 
19
- If you want to work locally using your own IDE, you can clone this repo and push changes. Pushed changes will also be reflected in Lovable.
20
+ ### 1️⃣ Rich Text Editing
21
+ - Write and edit formatted text
22
+ - Supports paragraphs and headings
23
+ - Clean HTML output
20
24
 
21
- The only requirement is having Node.js & npm installed - [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating)
25
+ ---
22
26
 
23
- Follow these steps:
27
+ ### 2️⃣ Formatting Toolbar
28
+ - Bold, italic, underline formatting
29
+ - Heading selection (H1–H6)
30
+ - Context-aware toolbar
24
31
 
25
- ```sh
26
- # Step 1: Clone the repository using the project's Git URL.
27
- git clone <YOUR_GIT_URL>
32
+ ---
28
33
 
29
- # Step 2: Navigate to the project directory.
30
- cd <YOUR_PROJECT_NAME>
34
+ ### 3️⃣ Links
35
+ - Add and edit links
36
+ - Link dialog with validation
37
+ - Safe URL handling
31
38
 
32
- # Step 3: Install the necessary dependencies.
33
- npm i
39
+ ---
34
40
 
35
- # Step 4: Start the development server with auto-reloading and an instant preview.
36
- npm run dev
37
- ```
41
+ ### 4️⃣ Images
42
+ - Image upload support
43
+ - Resizable images
44
+ - Image alignment controls
38
45
 
39
- **Edit a file directly in GitHub**
46
+ ---
40
47
 
41
- - Navigate to the desired file(s).
42
- - Click the "Edit" button (pencil icon) at the top right of the file view.
43
- - Make your changes and commit the changes.
48
+ ### 5️⃣ Tables
49
+ - Insert tables
50
+ - Add / remove rows and columns
51
+ - Table-specific controls
44
52
 
45
- **Use GitHub Codespaces**
53
+ ---
46
54
 
47
- - Navigate to the main page of your repository.
48
- - Click on the "Code" button (green button) near the top right.
49
- - Select the "Codespaces" tab.
50
- - Click on "New codespace" to launch a new Codespace environment.
51
- - Edit files directly within the Codespace and commit and push your changes once you're done.
55
+ ### 6️⃣ Autosave
56
+ - Automatically saves content
57
+ - Prevents data loss
58
+ - Runs internally (no setup required)
52
59
 
53
- ## What technologies are used for this project?
60
+ ---
54
61
 
55
- This project is built with:
62
+ ### 7️⃣ Undo / Redo History
63
+ - Editor version history
64
+ - Safe undo and redo actions
56
65
 
57
- - Vite
58
- - TypeScript
59
- - React
60
- - shadcn-ui
61
- - Tailwind CSS
66
+ ---
62
67
 
63
- ## How can I deploy this project?
68
+ ### 8️⃣ Markdown Shortcuts
69
+ - Faster writing using keyboard shortcuts
70
+ - Markdown-style formatting support
64
71
 
65
- Simply open [Lovable](https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID) and click on Share -> Publish.
72
+ ---
66
73
 
67
- ## Can I connect a custom domain to my Lovable project?
74
+ ### 9️⃣ Responsive Design
75
+ - Works on desktop and mobile
76
+ - Touch-friendly UI
68
77
 
69
- Yes, you can!
78
+ ---
70
79
 
71
- To connect a domain, navigate to Project > Settings > Domains and click Connect Domain.
80
+ ### 🔒 Clean API Design
81
+ - Only **one public component**
82
+ - All complex logic is internal
83
+ - Easy to maintain and upgrade
72
84
 
73
- Read more here: [Setting up a custom domain](https://docs.lovable.dev/features/custom-domain#custom-domain)
85
+ ---
86
+
87
+ ## 📦 Installation
88
+
89
+ Install the package using npm:
90
+
91
+ ```bash
92
+ npm install @anilkumarteach/editor-ak
93
+
94
+ or with yarn:
95
+
96
+ yarn add @anilkumarteach/editor-ak
97
+
98
+
99
+ import "@anilkumarteach/editor-ak/dist/index.css";
100
+
101
+
102
+
103
+ import { RichTextEditor } from "@anilkumarteach/editor-ak";
104
+ import "@anilkumarteach/editor-ak/dist/index.css";
105
+
106
+ function App() {
107
+ return (
108
+ <div style={{ padding: "20px" }}>
109
+ <RichTextEditor />
110
+ </div>
111
+ );
112
+ }
113
+
114
+ export default App;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anilkumarteach/editor-ak",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "type": "module",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",
@@ -18,5 +18,8 @@
18
18
  "devDependencies": {
19
19
  "@vitejs/plugin-react": "^5.1.2",
20
20
  "vite": "^7.3.0"
21
+ },
22
+ "dependencies": {
23
+ "@anilkumarteach/editor-ak": "file:anilkumarteach-editor-ak-0.1.1.tgz"
21
24
  }
22
25
  }