flowtext-editor 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 +71 -146
  2. package/package.json +37 -4
package/README.md CHANGED
@@ -1,185 +1,110 @@
1
- # flowtext-editor
1
+ # FlowText Editor
2
2
 
3
- A reusable **Email Rich Text Editor** React component, packaged for distribution
4
- via npm. Built with React + TypeScript and bundled with Vite in library mode.
3
+ [![npm version](https://img.shields.io/npm/v/flowtext-editor.svg)](https://www.npmjs.com/package/flowtext-editor)
4
+ [![License](https://img.shields.io/npm/l/flowtext-editor.svg)](https://github.com/gchandru136/FlowTextEditor/blob/main/LICENSE)
5
5
 
6
- The library ships one component — `FlowTextEditor` — a `contenteditable`
7
- editor rendered inside an isolated iframe, with a formatting toolbar (bold,
8
- lists, alignment, links, tables, …) and optional AI text tools.
6
+ A modern, feature-rich React Rich Text Editor built for email templates, newsletters, and content editing.
9
7
 
10
8
  ---
11
9
 
12
- ## Requirements
10
+ ## 🌐 Live Playground
13
11
 
14
- - **Node.js** `>= 20.19` (see `engines` in `package.json`)
15
- - **npm** `>= 10`
12
+ Try the editor live in your browser:
13
+ 👉 **[https://flowtext-editor.vercel.app](https://flowtext-editor.vercel.app)**
16
14
 
17
- ## Quick start
15
+ ![FlowText Editor](./editor_main.png)
18
16
 
19
- ```bash
20
- npm install
21
- npm run dev
22
- ```
23
-
24
- `npm run dev` launches the playground at **http://localhost:5173** with hot reload.
25
- Edit anything in `src/` and the preview updates instantly.
17
+ ---
26
18
 
27
- ## npm scripts
19
+ ## ✨ Features
20
+
21
+ * **✅ Rich Text Editing** — Clean contenteditable environment inside an isolated iframe to prevent style pollution.
22
+ * **✅ Heading & Paragraph Styles** — Easily switch between Headings (H1 to H6) and paragraph blocks.
23
+ * **✅ Font Size Controls** — Fluid font size selector with quick step controls.
24
+ * **✅ Text & Background Color** — Premium palette picker with custom Hex value input support.
25
+ * **✅ Bold / Italic / Underline** — Quick standard formatting shortcuts and visual active indicators.
26
+ * **✅ Numbered & Bulleted Lists** — Predefined list styles plus custom character bullet overrides.
27
+ * **✅ Text Alignment** — Left, Center, Right, and Justified alignments.
28
+ * **✅ Tables** — Drag-resizable cell margins, cell borders, and hover-triggered add row/column buttons.
29
+ * **✅ Links & Assets** — Popover anchor editor to insert, edit, follow, and remove links easily.
30
+ * **✅ Undo / Redo** — Complete editor action history.
31
+ * **✅ Spellcheck Support** — Built-in native browser spellcheck with user-provided exclude lists.
32
+ * **✅ Responsive Toolbar** — Automatic wrapping and row-edge spacing alignment.
33
+ * **✅ Light & Dark Theme** — Clean custom variables to theme the host shell and inner workspace.
34
+ * **✅ Modern UI** — Highly polished, split-button container layout inspired by Notion and Google Docs.
28
35
 
29
- | Script | What it does |
30
- | -------------------------- | ----------------------------------------------------------------- |
31
- | `npm run dev` | Start the playground dev server (HMR). |
32
- | `npm run build` | Type-check, then build the library (`dist/`) with `.d.ts` + maps. |
33
- | `npm run build:playground` | Build the playground as a static site (for a shareable preview). |
34
- | `npm run preview` | Preview the built playground locally. |
35
- | `npm run typecheck` | Run TypeScript in no-emit mode over app + node projects. |
36
- | `npm run lint` | Lint with ESLint (type-aware). |
37
- | `npm run lint:fix` | Lint and auto-fix. |
38
- | `npm run format` | Format the repo with Prettier. |
39
- | `npm run format:check` | Verify formatting without writing. |
40
- | `npm run clean` | Remove `dist/`. |
36
+ ---
41
37
 
42
- ## Project structure
38
+ ## 📦 Installation
43
39
 
44
- ```
45
- .
46
- ├── src/ # Published library source
47
- │ ├── components/ # React components (public API lives here)
48
- │ ├── hooks/ # Reusable hooks
49
- │ ├── utils/ # Framework-agnostic helpers
50
- │ ├── styles/ # Design tokens + base CSS
51
- │ ├── types/ # Shared public types
52
- │ ├── assets/ # Static assets bundled with the library
53
- │ └── index.ts # The single public entry point (barrel)
54
- │
55
- ├── playground/ # Local demo app — NEVER published
56
- │ ├── src/ # Playground shell (Storybook-lite layout)
57
- │ ├── index.html
58
- │ └── vite.config.ts # Dev-server config (aliases the lib to source)
59
- │
60
- ├── vite.config.ts # Library build (Vite library mode)
61
- ├── vite.aliases.ts # Shared path aliases (single source of truth)
62
- ├── tsconfig*.json # Project-reference TS setup (base/app/node)
63
- ├── eslint.config.js # ESLint flat config (type-aware)
64
- └── .prettierrc.json
65
- ```
40
+ Install the package via your preferred package manager:
66
41
 
67
- ## How the playground consumes the library
42
+ ```bash
43
+ # npm
44
+ npm install flowtext-editor
68
45
 
69
- The playground imports the library by its **public package name**:
46
+ # yarn
47
+ yarn add flowtext-editor
70
48
 
71
- ```ts
72
- import { FlowTextEditor } from 'flowtext-editor';
49
+ # pnpm
50
+ pnpm add flowtext-editor
73
51
  ```
74
52
 
75
- During development that name is aliased to `src/index.ts` (see
76
- `playground/vite.config.ts`), so you get **instant HMR against source** while
77
- still importing exactly the way an external consumer would. To smoke-test the
78
- real built artifact instead, run `npm run build` and remove the package-name
79
- alias.
80
-
81
- ## Path aliases
82
-
83
- Defined once in `vite.aliases.ts` and mirrored in `tsconfig.app.json`:
84
-
85
- | Alias | Resolves to |
86
- | --------------- | ------------------ |
87
- | `@/*` | `src/*` |
88
- | `@components/*` | `src/components/*` |
89
- | `@hooks/*` | `src/hooks/*` |
90
- | `@utils/*` | `src/utils/*` |
91
- | `@styles/*` | `src/styles/*` |
92
- | `@assets/*` | `src/assets/*` |
93
-
94
- ## Package exports
95
-
96
- Configured in `package.json` for modern, dual-format consumption:
97
-
98
- ```jsonc
99
- {
100
- ".": {
101
- "types": "./dist/index.d.ts",
102
- "import": "./dist/index.js", // ESM
103
- "require": "./dist/index.cjs", // CJS
104
- },
105
- "./styles.css": "./dist/flowtext-editor.css",
106
- }
107
- ```
53
+ ---
108
54
 
109
- - **Tree-shaking** — `"sideEffects": ["**/*.css"]` lets bundlers drop unused code
110
- while preserving stylesheet imports.
111
- - **Peer dependencies** — `react` / `react-dom` are peers (`^18 || ^19`); they are
112
- never bundled into `dist`.
55
+ ## 🚀 Quick Start
113
56
 
114
- ## Usage
57
+ Here is a clean React example to get started:
115
58
 
116
59
  ```tsx
117
- import { useState } from 'react';
60
+ import React, { useState } from 'react';
118
61
  import { FlowTextEditor } from 'flowtext-editor';
119
- import type { AiTextActionHandler } from 'flowtext-editor';
120
62
  import 'flowtext-editor/styles.css';
121
63
 
122
- // The component is backend-agnostic: you wire the AI transport here.
123
- const handleAiText: AiTextActionHandler = async ({ action, text, wordCount, toneType }) => {
124
- const res = await fetch('/api/ai-text-tools', {
125
- method: 'POST',
126
- headers: { 'Content-Type': 'application/json' },
127
- body: JSON.stringify({ action, text, wordCount, toneType }),
128
- });
129
- const data = await res.json();
130
- return data.response ?? null;
131
- };
132
-
133
- export function Composer() {
134
- const [content, setContent] = useState('<p>Hello!</p>');
64
+ export default function App() {
65
+ const [content, setContent] = useState('<p>Start typing here...</p>');
66
+
135
67
  return (
136
- <FlowTextEditor
137
- mailContent={content}
138
- setMailContent={setContent}
139
- onAiTextAction={handleAiText}
140
- />
68
+ <div style={{ padding: '24px', maxWidth: '1000px', margin: '0 auto' }}>
69
+ <h1>My Editor</h1>
70
+ <FlowTextEditor
71
+ mailContent={content}
72
+ setMailContent={setContent}
73
+ modalHeight="500px"
74
+ spellcheckIgnoreWords={['FlowText']}
75
+ />
76
+ </div>
141
77
  );
142
78
  }
143
79
  ```
144
80
 
145
- ### Props
81
+ > [!IMPORTANT]
82
+ > **Styles Opt-In:** Remember to import `flowtext-editor/styles.css` once in your application entry file to load design tokens and core dialog transitions correctly.
146
83
 
147
- | Prop | Type | Default | Description |
148
- | ----------------------- | --------------------------- | --------- | --------------------------------------------------------------- |
149
- | `mailContent` | `string` | — | **Required.** Current HTML content (controlled). |
150
- | `setMailContent` | `(content: string) => void` | — | **Required.** Called with the editor's HTML on every edit. |
151
- | `showAiTools` | `boolean` | `true` | Show the AI toolbar. Requires `onAiTextAction`. |
152
- | `onAiTextAction` | `AiTextActionHandler` | — | Handler powering the AI buttons. Omit to disable AI features. |
153
- | `resetMailContent` | `boolean` | `false` | Toggle to force the editor to re-sync `mailContent`. |
154
- | `spellcheckIgnoreWords` | `string[]` | `[]` | Words wrapped in `spellcheck="false"` spans (e.g. brand names). |
155
- | `modalHeight` | `string` | `'650px'` | Height of the editor iframe (any CSS length). |
84
+ ---
156
85
 
157
- > **Styles:** import `flowtext-editor/styles.css` once in your app. The
158
- > toolbar/editor inside the iframe are self-styled; the stylesheet themes the
159
- > loading spinner and error toast (and exposes `--erte-*` design tokens).
86
+ ## ⚙️ Props
160
87
 
161
- ### Decoupling from the original component
88
+ The `FlowTextEditor` component accepts the following props:
162
89
 
163
- The source component was adapted for reuse — behavior is unchanged, but
164
- app-specific coupling was removed so the package stands alone:
90
+ | Prop | Type | Default | Description |
91
+ | :--- | :--- | :--- | :--- |
92
+ | **`mailContent`** | `string` | — | **Required.** Controlled HTML value representing the editor content. |
93
+ | **`setMailContent`** | `(content: string) => void` | — | **Required.** Callback triggered on input change, returning the updated HTML. |
94
+ | **`resetMailContent`** | `boolean` | `false` | When set to `true`, forces the editor to overwrite its internal content with the current `mailContent` prop value. |
95
+ | **`modalHeight`** | `string` | `'650px'` | Height of the editor container (accepts any valid CSS unit like `px`, `vh`, `rem`). |
96
+ | **`spellcheckIgnoreWords`** | `string[]` | `[]` | List of custom words (like brand names or codes) that will be excluded from the native browser spellchecker. |
165
97
 
166
- - **AI backend** → injected via `onAiTextAction` (was a hard-coded `axios` call
167
- to a `NEXT_PUBLIC_SERVER_API` endpoint).
168
- - **Spellcheck exceptions** → now the `spellcheckIgnoreWords` prop (were
169
- hard-coded product names).
170
- - **Loader / toast** → small internal components (were app-local imports).
171
- - **Icons** → inlined as SVG strings (Font Awesome 5 Free, MIT). The package has
172
- **zero runtime dependencies** — only the `react` / `react-dom` peers.
98
+ ---
173
99
 
174
- ## Publishing (later)
100
+ ## 🚀 AI Features
175
101
 
176
- Everything is prepared; when you're ready:
102
+ ![FlowText Editor with AI Features](./editor_ai.png)
177
103
 
178
- ```bash
179
- npm run build # prepublishOnly also runs this automatically
180
- npm publish
181
- ```
104
+ AI-powered writing tools are currently under development and will be available in a future release. Stay tuned for exciting updates.
105
+
106
+ ---
182
107
 
183
- ## License
108
+ ## 📄 License
184
109
 
185
- MIT — see [LICENSE](./LICENSE).
110
+ This project is licensed under the MIT License — see the [LICENSE](./LICENSE) file for details.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowtext-editor",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "A reusable, framework-agnostic Email Rich Text Editor React component.",
5
5
  "license": "MIT",
6
6
  "publishConfig": {
@@ -69,11 +69,44 @@
69
69
  "vite-plugin-dts": "^4.5.4"
70
70
  },
71
71
  "keywords": [
72
- "react",
73
72
  "rich-text-editor",
74
- "wysiwyg",
73
+ "react-editor",
75
74
  "email-editor",
75
+ "wysiwyg",
76
76
  "contenteditable",
77
- "typescript"
77
+ "html-editor",
78
+ "newsletter-editor",
79
+ "email-template",
80
+ "react-rich-text",
81
+ "typescript",
82
+ "vite",
83
+ "react-component",
84
+ "text-editor",
85
+ "email-builder",
86
+ "mail-editor",
87
+ "editor",
88
+ "richtext",
89
+ "toolbar",
90
+ "html-email",
91
+ "react-wysiwyg",
92
+ "content-editor",
93
+ "text-formatting",
94
+ "email-template-builder",
95
+ "html-content",
96
+ "document-editor",
97
+ "modern-editor",
98
+ "react",
99
+ "javascript",
100
+ "typescript-library",
101
+ "email-composer",
102
+ "template-editor",
103
+ "wysiwyg-editor",
104
+ "flowtext",
105
+ "flowtext-editor",
106
+ "react-email-editor",
107
+ "html-rich-text",
108
+ "rich-text",
109
+ "react-library",
110
+ "component-library"
78
111
  ]
79
112
  }