flowtext-editor 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 gchandru136
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,185 @@
+# flowtext-editor
+
+A reusable **Email Rich Text Editor** React component, packaged for distribution
+via npm. Built with React + TypeScript and bundled with Vite in library mode.
+
+The library ships one component — `FlowTextEditor` — a `contenteditable`
+editor rendered inside an isolated iframe, with a formatting toolbar (bold,
+lists, alignment, links, tables, …) and optional AI text tools.
+
+---
+
+## Requirements
+
+- **Node.js** `>= 20.19` (see `engines` in `package.json`)
+- **npm** `>= 10`
+
+## Quick start
+
+```bash
+npm install
+npm run dev
+```
+
+`npm run dev` launches the playground at **http://localhost:5173** with hot reload.
+Edit anything in `src/` and the preview updates instantly.
+
+## npm scripts
+
+| Script                     | What it does                                                      |
+| -------------------------- | ----------------------------------------------------------------- |
+| `npm run dev`              | Start the playground dev server (HMR).                            |
+| `npm run build`            | Type-check, then build the library (`dist/`) with `.d.ts` + maps. |
+| `npm run build:playground` | Build the playground as a static site (for a shareable preview).  |
+| `npm run preview`          | Preview the built playground locally.                             |
+| `npm run typecheck`        | Run TypeScript in no-emit mode over app + node projects.          |
+| `npm run lint`             | Lint with ESLint (type-aware).                                    |
+| `npm run lint:fix`         | Lint and auto-fix.                                                |
+| `npm run format`           | Format the repo with Prettier.                                    |
+| `npm run format:check`     | Verify formatting without writing.                                |
+| `npm run clean`            | Remove `dist/`.                                                   |
+
+## Project structure
+
+```
+.
+├── src/                      # Published library source
+│   ├── components/           # React components (public API lives here)
+│   ├── hooks/                # Reusable hooks
+│   ├── utils/                # Framework-agnostic helpers
+│   ├── styles/               # Design tokens + base CSS
+│   ├── types/                # Shared public types
+│   ├── assets/               # Static assets bundled with the library
+│   └── index.ts              # The single public entry point (barrel)
+│
+├── playground/               # Local demo app — NEVER published
+│   ├── src/                  # Playground shell (Storybook-lite layout)
+│   ├── index.html
+│   └── vite.config.ts        # Dev-server config (aliases the lib to source)
+│
+├── vite.config.ts            # Library build (Vite library mode)
+├── vite.aliases.ts           # Shared path aliases (single source of truth)
+├── tsconfig*.json            # Project-reference TS setup (base/app/node)
+├── eslint.config.js          # ESLint flat config (type-aware)
+└── .prettierrc.json
+```
+
+## How the playground consumes the library
+
+The playground imports the library by its **public package name**:
+
+```ts
+import { FlowTextEditor } from 'flowtext-editor';
+```
+
+During development that name is aliased to `src/index.ts` (see
+`playground/vite.config.ts`), so you get **instant HMR against source** while
+still importing exactly the way an external consumer would. To smoke-test the
+real built artifact instead, run `npm run build` and remove the package-name
+alias.
+
+## Path aliases
+
+Defined once in `vite.aliases.ts` and mirrored in `tsconfig.app.json`:
+
+| Alias           | Resolves to        |
+| --------------- | ------------------ |
+| `@/*`           | `src/*`            |
+| `@components/*` | `src/components/*` |
+| `@hooks/*`      | `src/hooks/*`      |
+| `@utils/*`      | `src/utils/*`      |
+| `@styles/*`     | `src/styles/*`     |
+| `@assets/*`     | `src/assets/*`     |
+
+## Package exports
+
+Configured in `package.json` for modern, dual-format consumption:
+
+```jsonc
+{
+  ".": {
+    "types": "./dist/index.d.ts",
+    "import": "./dist/index.js", // ESM
+    "require": "./dist/index.cjs", // CJS
+  },
+  "./styles.css": "./dist/flowtext-editor.css",
+}
+```
+
+- **Tree-shaking** — `"sideEffects": ["**/*.css"]` lets bundlers drop unused code
+  while preserving stylesheet imports.
+- **Peer dependencies** — `react` / `react-dom` are peers (`^18 || ^19`); they are
+  never bundled into `dist`.
+
+## Usage
+
+```tsx
+import { useState } from 'react';
+import { FlowTextEditor } from 'flowtext-editor';
+import type { AiTextActionHandler } from 'flowtext-editor';
+import 'flowtext-editor/styles.css';
+
+// The component is backend-agnostic: you wire the AI transport here.
+const handleAiText: AiTextActionHandler = async ({ action, text, wordCount, toneType }) => {
+  const res = await fetch('/api/ai-text-tools', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ action, text, wordCount, toneType }),
+  });
+  const data = await res.json();
+  return data.response ?? null;
+};
+
+export function Composer() {
+  const [content, setContent] = useState('<p>Hello!</p>');
+  return (
+    <FlowTextEditor
+      mailContent={content}
+      setMailContent={setContent}
+      onAiTextAction={handleAiText}
+    />
+  );
+}
+```
+
+### Props
+
+| Prop                    | Type                        | Default   | Description                                                     |
+| ----------------------- | --------------------------- | --------- | --------------------------------------------------------------- |
+| `mailContent`           | `string`                    | —         | **Required.** Current HTML content (controlled).                |
+| `setMailContent`        | `(content: string) => void` | —         | **Required.** Called with the editor's HTML on every edit.      |
+| `showAiTools`           | `boolean`                   | `true`    | Show the AI toolbar. Requires `onAiTextAction`.                 |
+| `onAiTextAction`        | `AiTextActionHandler`       | —         | Handler powering the AI buttons. Omit to disable AI features.   |
+| `resetMailContent`      | `boolean`                   | `false`   | Toggle to force the editor to re-sync `mailContent`.            |
+| `spellcheckIgnoreWords` | `string[]`                  | `[]`      | Words wrapped in `spellcheck="false"` spans (e.g. brand names). |
+| `modalHeight`           | `string`                    | `'650px'` | Height of the editor iframe (any CSS length).                   |
+
+> **Styles:** import `flowtext-editor/styles.css` once in your app. The
+> toolbar/editor inside the iframe are self-styled; the stylesheet themes the
+> loading spinner and error toast (and exposes `--erte-*` design tokens).
+
+### Decoupling from the original component
+
+The source component was adapted for reuse — behavior is unchanged, but
+app-specific coupling was removed so the package stands alone:
+
+- **AI backend** → injected via `onAiTextAction` (was a hard-coded `axios` call
+  to a `NEXT_PUBLIC_SERVER_API` endpoint).
+- **Spellcheck exceptions** → now the `spellcheckIgnoreWords` prop (were
+  hard-coded product names).
+- **Loader / toast** → small internal components (were app-local imports).
+- **Icons** → inlined as SVG strings (Font Awesome 5 Free, MIT). The package has
+  **zero runtime dependencies** — only the `react` / `react-dom` peers.
+
+## Publishing (later)
+
+Everything is prepared; when you're ready:
+
+```bash
+npm run build      # prepublishOnly also runs this automatically
+npm publish
+```
+
+## License
+
+MIT — see [LICENSE](./LICENSE).

package/dist/flowtext-editor.css

@@ -0,0 +1,102 @@
+/**
+ * Library design tokens + base styles.
+ *
+ * Consumers opt in with:  import 'flowtext-editor/styles.css';
+ * Everything is namespaced under `--erte-*` to avoid clashing with host apps.
+ */
+:root {
+  --erte-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --erte-color-border: #4c6177;
+  --erte-color-accent: #d23f00;
+  --erte-color-primary: #0e4678;
+  --erte-color-surface: #ffffff;
+  --erte-color-muted: #f9f9f9;
+  --erte-radius: 4px;
+  --erte-spacing: 8px;
+}
+
+/* Loading overlay shown during AI requests. */
+.erte-spinner-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.6);
+  z-index: 10000;
+}
+
+.erte-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #e6ecf1;
+  border-top-color: var(--erte-color-primary);
+  border-radius: 50%;
+  animation: erte-spin 0.8s linear infinite;
+}
+
+@keyframes erte-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Resizable editor frame gutters (grid tracks in the component, OUTSIDE the
+   iframe): right gutter = width resize, bottom bar = height resize, corner =
+   both. Layout/cursors are inline in the component so resizing works without
+   this stylesheet; this layer adds the frame look, grips, and states. */
+.erte-resize-handle {
+  --erte-grip-color: #b6bec8;
+  background: #f7f8fa;
+  transition: background-color 0.15s ease;
+}
+.erte-resize-handle:hover {
+  --erte-grip-color: #8a93a0;
+  background: #eef0f3;
+}
+.erte-resize-handle.is-active {
+  --erte-grip-color: var(--erte-color-accent);
+  background: #e9ecef;
+}
+
+/* The bottom bar is the only visible resize element: a slim frame rail with
+   a soft divider and a faint inset shadow. Edge/corner resizing uses the
+   invisible `.erte-resize-zone` hit areas (cursor-only, no visuals). */
+.erte-resize-handle--bottom {
+  border-top: 1px solid #e9ecef;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+/* Bottom bar grip: three hairline horizontal lines, dead-centred. */
+.erte-resize-handle--bottom::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 14px;
+  height: 5px;
+  border-radius: 1px;
+  background: repeating-linear-gradient(
+    to bottom,
+    var(--erte-grip-color) 0 1px,
+    transparent 1px 2px
+  );
+}
+
+/* Transient error toast. */
+.erte-toast {
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10001;
+  padding: 10px 16px;
+  background: var(--erte-color-surface);
+  color: var(--erte-color-primary);
+  border: 1px solid var(--erte-color-primary);
+  border-radius: var(--erte-radius);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  font-family: var(--erte-font-family);
+  font-size: 14px;
+}