{"_id":"@datazymes/dz-rich-text-editor","name":"@datazymes/dz-rich-text-editor","dist-tags":{"latest":"2.2.0"},"versions":{"2.2.0":{"name":"@datazymes/dz-rich-text-editor","version":"2.2.0","description":"A comprehensive React rich text editor component with image upload, resize functionality, and standalone CSS. Ready for NPM publishing.","main":"./dist/dz-rich-text-editor.umd.js","module":"./dist/dz-rich-text-editor.es.js","types":"./dist/DZRichTextEditor.d.ts","repository":{"type":"git","url":"git+https://github.com/datazymesrepository/your-repo-name.git"},"scripts":{"dev":"vite","build":"vite build","preview":"vite preview","lint":"eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@tailwindcss/postcss":"^4.1.8","@tailwindcss/typography":"^0.5.16","@types/react":"^18.2.15","@types/react-dom":"^18.2.7","@vitejs/plugin-react":"^4.0.3","autoprefixer":"^10.4.21","eslint":"^8.45.0","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.3","postcss":"^8.5.4","tailwindcss":"^4.1.8","vite":"^4.4.5","vite-plugin-dts":"^4.5.4"},"keywords":["react","dz-rich-text-editor","rich-text-editor","standalone-css","wysiwyg","contenteditable","text-editor","image-upload","image-resize","npm-package","github-packages"],"author":{"name":"Your Name"},"license":"MIT","dependencies":{"@datazymes/dz-rich-text-editor":"^2.2.0","react":">=16.8.0","react-dom":">=16.8.0"},"_id":"@datazymes/dz-rich-text-editor@2.2.0","gitHead":"7d875d8fd4bfb61dc8a81d9930e47eee4c99e742","bugs":{"url":"https://github.com/datazymesrepository/your-repo-name/issues"},"homepage":"https://github.com/datazymesrepository/your-repo-name#readme","_nodeVersion":"21.2.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-XL4S4O02vgnkUWZt+Yf4+uSJhAzcj9wlHX1ECF2tsPdca7FskSFsMWjtByc621yg8wByr12z0P1HYdM6I7D1Xg==","shasum":"f6a6288a967ae880d38bb02df46891e28bf52afd","tarball":"https://registry.npmjs.org/@datazymes/dz-rich-text-editor/-/dz-rich-text-editor-2.2.0.tgz","fileCount":5,"unpackedSize":148805,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBqU0cz2G9Im5poiDe25mwMY7OBtbvRdCkSDdS2R0o5TAiEAhHXZFUroveECFoPIEfvrdpPMjLxHU6dhmqbX1s67+Bs="}]},"_npmUser":{"name":"datazymes","email":"bhojaraj.sahu@datazymes.com"},"directories":{},"maintainers":[{"name":"datazymes","email":"bhojaraj.sahu@datazymes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dz-rich-text-editor_2.2.0_1755520392902_0.8927489609384651"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-18T12:33:12.788Z","2.2.0":"2025-08-18T12:33:13.070Z","modified":"2025-08-18T12:33:13.354Z"},"maintainers":[{"name":"datazymes","email":"bhojaraj.sahu@datazymes.com"}],"description":"A comprehensive React rich text editor component with image upload, resize functionality, and standalone CSS. Ready for NPM publishing.","homepage":"https://github.com/datazymesrepository/your-repo-name#readme","keywords":["react","dz-rich-text-editor","rich-text-editor","standalone-css","wysiwyg","contenteditable","text-editor","image-upload","image-resize","npm-package","github-packages"],"repository":{"type":"git","url":"git+https://github.com/datazymesrepository/your-repo-name.git"},"author":{"name":"Your Name"},"bugs":{"url":"https://github.com/datazymesrepository/your-repo-name/issues"},"license":"MIT","readme":"# DZRichTextEditor - A React Rich Text Editor Component\r\n\r\nDZRichTextEditor is a comprehensive, parameterized React rich text editor component designed for easy integration and customization. It supports image uploads (via drag-drop, paste, or file dialog), client-side image resizing, and comes with a clean, standalone CSS file. It is configured for publishing to NPM and GitHub Packages.\r\n\r\n**Note on Placeholders:** Before publishing, you must replace the placeholder values in `package.json` (`@datazymesrepository`, repository URL) and `./.npmrc` (`@datazymesrepository`) with your actual GitHub username or organization name.\r\n\r\n## Installation\r\n\r\nInstall the package from GitHub Packages:\r\n\r\n```bash\r\nnpm install @datazymesrepository/dz-rich-text-editor\r\n```\r\n\r\nYou will also need to install the peer dependencies:\r\n\r\n```bash\r\nnpm install react react-dom\r\n```\r\n\r\n## Publishing to GitHub Packages\r\n\r\nTo publish new versions of this package, follow these steps:\r\n\r\n### 1. Authenticate with GitHub Packages\r\n\r\nYou need to authenticate `npm` with GitHub Packages.\r\n\r\n- **Create a Personal Access Token (PAT):**\r\n  Go to your [GitHub Developer Settings](https://github.com/settings/tokens) and generate a new classic PAT. Grant it the `write:packages` scope.\r\n\r\n- **Log in:**\r\n  Use the following command to log in, replacing `YOUR-USERNAME` with your GitHub username and `YOUR-PAT` with the token you just created.\r\n\r\n  ```bash\r\n  npm login --scope=@datazymesrepository --registry=https://npm.pkg.github.com\r\n  ```\r\n\r\n### 2. Update Version\r\n\r\nBefore publishing, update the `version` in `package.json` according to semantic versioning rules.\r\n\r\n### 3. Build the Package\r\n\r\nRun the build script to transpile the component and generate the distributable files in the `dist/` directory.\r\n\r\n```bash\r\nnpm run build\r\n```\r\n\r\n### 4. Publish\r\n\r\nFinally, publish the package to the GitHub Packages registry.\r\n\r\n```bash\r\nnpm publish\r\n```\r\n\r\n---\r\n\r\n## Features\r\n\r\n- **Image Upload**: Supports pasting, drag-and-drop, and a toolbar button for image uploads.\r\n- **Backend Agnostic**: Uploads images via a `fetch` call to a configurable backend endpoint.\r\n- **Image Resizing**: Simple and intuitive client-side image resizing with handles.\r\n- **Customizable Uploads**: Pass API URLs and credentials via the `uploadConfig` prop.\r\n- **Clean HTML**: The editor is designed to keep the underlying HTML clean from temporary resizing elements.\r\n- **Standalone CSS**: A separate `index.css` file for easy styling and customization.\r\n\r\n## Props\r\n\r\n### `DZRichTextEditor`\r\n\r\n| Prop           | Type     | Default                                            | Description                                                                                                              |\r\n| -------------- | -------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |\r\n| `value`        | `string` | `''`                                               | The HTML content of the editor.                                                                                          |\r\n| `onChange`     | `func`   | `(html) => {}`                                     | A callback function that receives the updated HTML content whenever it changes.                                          |\r\n| `uploadConfig` | `object` | `{ clientId: 'default', clientSecret: 'default' }` | An object containing the configuration for the image upload endpoint. See `uploadConfig` section below for more details. |\r\n| `placeholder`  | `string` | `'Compose an epic...'`                             | Placeholder text to display when the editor is empty.                                                                    |\r\n\r\n## Quick Start\r\n\r\n```jsx\r\nimport React, { useState } from \"react\";\r\nimport DZRichTextEditor from \"dz-rich-text-editor\";\r\nimport \"dz-rich-text-editor/index.css\"; // Import the CSS\r\n\r\nfunction MyApp() {\r\n  const [content, setContent] = useState(\r\n    \"<p>Welcome to <strong>DZ Rich Text Editor</strong>!</p>\"\r\n  );\r\n\r\n  return (\r\n    <DZRichTextEditor\r\n      value={content}\r\n      onChange={setContent}\r\n      placeholder=\"Start typing...\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n## Image Upload Configuration\r\n\r\nTo enable image upload functionality, configure the `uploadConfig` prop:\r\n\r\n```jsx\r\nimport React, { useState } from \"react\";\r\nimport DZRichTextEditor from \"dz-rich-text-editor\";\r\n\r\nfunction EditorWithImageUpload() {\r\n  const [content, setContent] = useState(\"\");\r\n\r\n  const uploadConfig = {\r\n    uploadApiUrl: \"https://your-api.com/upload\",\r\n    clientId: \"your-client-id\",\r\n    clientSecret: \"your-client-secret\",\r\n  };\r\n\r\n  return (\r\n    <DZRichTextEditor\r\n      value={content}\r\n      onChange={setContent}\r\n      uploadConfig={uploadConfig}\r\n      toolbarOptions={[\r\n        \"bold\",\r\n        \"italic\",\r\n        \"underline\",\r\n        \"insertImage\", // Enable image insert button\r\n        \"link\",\r\n        \"blockquote\",\r\n      ]}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### Upload API Requirements\r\n\r\nYour upload API should:\r\n\r\n1. **Accept POST requests** to the configured endpoint\r\n2. **Accept FormData** with the following fields:\r\n\r\n   - `image`: The image file\r\n   - `client_id`: Authentication client ID (optional)\r\n   - `client_secret`: Authentication client secret (optional)\r\n\r\n3. **Return JSON response** in this format:\r\n   ```json\r\n   {\r\n     \"data\": {\r\n       \"authenticatedUrl\": \"https://your-cdn.com/path/to/uploaded-image.jpg\"\r\n     }\r\n   }\r\n   ```\r\n\r\n### Example Backend Implementation (Express.js)\r\n\r\n```javascript\r\napp.post(\"/upload\", upload.single(\"image\"), (req, res) => {\r\n  const { client_id, client_secret } = req.body;\r\n\r\n  // Validate credentials\r\n  if (!validateCredentials(client_id, client_secret)) {\r\n    return res.status(401).json({ error: \"Invalid credentials\" });\r\n  }\r\n\r\n  // Upload to your storage (GCS, AWS S3, etc.)\r\n  const imageUrl = uploadToStorage(req.file);\r\n\r\n  res.json({\r\n    data: {\r\n      authenticatedUrl: imageUrl,\r\n    },\r\n  });\r\n});\r\n```\r\n\r\n## Image Features\r\n\r\n### Image Upload Methods\r\n\r\n1. **Toolbar Button**: Click the 🖼️ button to select images from your device\r\n2. **Drag & Drop**: Drag images directly into the editor\r\n3. **Paste**: Paste images from clipboard (Ctrl+V)\r\n\r\n### Image Resize Functionality\r\n\r\nImages inserted into the editor can be resized:\r\n\r\n1. **Click any image** to select it (shows blue border with resize handles)\r\n2. **Drag corner handles** to resize freely (width and height independently)\r\n3. **Drag edge handles** for single-dimension resizing\r\n4. **Click outside** to deselect the image\r\n\r\n**Resize Features:**\r\n\r\n- 8 resize handles (4 corners + 4 edges)\r\n- No aspect ratio constraints - resize to any dimensions\r\n- Minimum size constraints (50px width, 30px height)\r\n- Visual feedback during resize operations\r\n- Clean HTML output (resize controls are editor-only)\r\n\r\n## Props API\r\n\r\n```typescript\r\ninterface DZRichTextEditorProps {\r\n  value?: string;\r\n  onChange?: (content: string) => void;\r\n  toolbarOptions?: string[];\r\n  placeholder?: string;\r\n  readOnly?: boolean;\r\n  height?: string;\r\n  width?: string;\r\n  toolbarPosition?: \"top\" | \"bottom\";\r\n  stickyToolbar?: boolean;\r\n  stickyOffset?: number;\r\n  debounceTime?: number;\r\n  customClasses?: CustomClasses;\r\n  uploadConfig?: UploadConfig;\r\n}\r\n\r\ninterface UploadConfig {\r\n  uploadApiUrl?: string;\r\n  clientId?: string;\r\n  clientSecret?: string;\r\n}\r\n```\r\n\r\n### Core Props\r\n\r\n| Prop             | Type                        | Default             | Description                   |\r\n| ---------------- | --------------------------- | ------------------- | ----------------------------- |\r\n| `value`          | `string`                    | `''`                | HTML content of the editor    |\r\n| `onChange`       | `(content: string) => void` | -                   | Callback when content changes |\r\n| `toolbarOptions` | `string[]`                  | All options         | Array of toolbar button names |\r\n| `placeholder`    | `string`                    | `'Start typing...'` | Placeholder text              |\r\n| `readOnly`       | `boolean`                   | `false`             | Disable editing               |\r\n| `uploadConfig`   | `UploadConfig`              | `{}`                | Image upload configuration    |\r\n\r\n### Layout Props\r\n\r\n| Prop              | Type                | Default    | Description           |\r\n| ----------------- | ------------------- | ---------- | --------------------- |\r\n| `height`          | `string`            | `'h-64'`   | CSS height class      |\r\n| `width`           | `string`            | `'w-full'` | CSS width class       |\r\n| `toolbarPosition` | `'top' \\| 'bottom'` | `'top'`    | Toolbar position      |\r\n| `stickyToolbar`   | `boolean`           | `false`    | Enable sticky toolbar |\r\n| `stickyOffset`    | `number`            | `0`        | Sticky toolbar offset |\r\n\r\n### Performance Props\r\n\r\n| Prop            | Type            | Default | Description          |\r\n| --------------- | --------------- | ------- | -------------------- |\r\n| `debounceTime`  | `number`        | `300`   | Debounce delay (ms)  |\r\n| `customClasses` | `CustomClasses` | `{}`    | Override CSS classes |\r\n\r\n## Toolbar Options\r\n\r\nConfigure which tools appear in the toolbar:\r\n\r\n```jsx\r\n// Minimal toolbar\r\n<DZRichTextEditor\r\n  toolbarOptions={['bold', 'italic', 'link']}\r\n  // ... other props\r\n/>\r\n\r\n// Full toolbar (default)\r\n<DZRichTextEditor\r\n  toolbarOptions={[\r\n    'bold', 'italic', 'underline', 'strikethrough',\r\n    'highlight', 'fontColor', 'headings', 'fontFamily',\r\n    'lineSpacing', 'alignLeft', 'alignCenter', 'alignRight',\r\n    'alignJustify', 'unorderedList', 'orderedList', 'todoList',\r\n    'increaseIndent', 'decreaseIndent', 'link', 'insertImage',\r\n    'blockquote', 'codeBlock', 'pageBreak', 'caseChange', 'insertTable'\r\n  ]}\r\n  // ... other props\r\n/>\r\n```\r\n\r\n### Available Options\r\n\r\n**Basic Formatting:**\r\n\r\n- `bold`, `italic`, `underline`, `strikethrough`\r\n- `highlight`, `fontColor`\r\n\r\n**Structure:**\r\n\r\n- `headings`, `fontFamily`, `lineSpacing`\r\n- `alignLeft`, `alignCenter`, `alignRight`, `alignJustify`\r\n\r\n**Lists & Indentation:**\r\n\r\n- `unorderedList`, `orderedList`, `todoList`\r\n- `increaseIndent`, `decreaseIndent`\r\n\r\n**Content:**\r\n\r\n- `link`, `insertImage`, `blockquote`, `codeBlock`\r\n- `insertTable`, `pageBreak`\r\n\r\n**Utilities:**\r\n\r\n- `caseChange`\r\n\r\n## Advanced Examples\r\n\r\n### Custom Styled Editor\r\n\r\n```jsx\r\n<DZRichTextEditor\r\n  value={content}\r\n  onChange={setContent}\r\n  height=\"h-96\"\r\n  width=\"max-w-4xl\"\r\n  customClasses={{\r\n    wrapper: \"border-2 border-purple-300 rounded-xl\",\r\n    toolbar: \"bg-purple-50 border-purple-200\",\r\n    contentArea: \"bg-white min-h-64\",\r\n    button: \"hover:bg-purple-100\",\r\n  }}\r\n  uploadConfig={{\r\n    uploadApiUrl: process.env.REACT_APP_UPLOAD_URL,\r\n    clientId: process.env.REACT_APP_CLIENT_ID,\r\n    clientSecret: process.env.REACT_APP_CLIENT_SECRET,\r\n  }}\r\n/>\r\n```\r\n\r\n### Sticky Toolbar Example\r\n\r\n```jsx\r\n<DZRichTextEditor\r\n  value={content}\r\n  onChange={setContent}\r\n  stickyToolbar={true}\r\n  stickyOffset={60} // Account for fixed header\r\n  height=\"h-screen\"\r\n/>\r\n```\r\n\r\n### Blog Editor Example\r\n\r\n```jsx\r\nfunction BlogEditor({ post, onSave }) {\r\n  const [content, setContent] = useState(post.content);\r\n\r\n  const uploadConfig = {\r\n    uploadApiUrl: \"/api/blog/upload-image\",\r\n    clientId: \"blog-client\",\r\n    clientSecret: process.env.REACT_APP_BLOG_SECRET,\r\n  };\r\n\r\n  return (\r\n    <div className=\"max-w-4xl mx-auto\">\r\n      <DZRichTextEditor\r\n        value={content}\r\n        onChange={setContent}\r\n        placeholder=\"Write your blog post...\"\r\n        height=\"h-96\"\r\n        uploadConfig={uploadConfig}\r\n        toolbarOptions={[\r\n          \"bold\",\r\n          \"italic\",\r\n          \"underline\",\r\n          \"highlight\",\r\n          \"headings\",\r\n          \"alignLeft\",\r\n          \"alignCenter\",\r\n          \"alignRight\",\r\n          \"unorderedList\",\r\n          \"orderedList\",\r\n          \"link\",\r\n          \"insertImage\",\r\n          \"blockquote\",\r\n          \"insertTable\",\r\n        ]}\r\n      />\r\n      <button onClick={() => onSave(content)}>Save Post</button>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n## Environment Configuration\r\n\r\nFor applications using environment variables, you can configure the upload settings:\r\n\r\n```javascript\r\n// .env\r\nREACT_APP_UPLOAD_URL=https://your-api.com/upload\r\nREACT_APP_CLIENT_ID=your-client-id\r\nREACT_APP_CLIENT_SECRET=your-client-secret\r\n\r\n// Component\r\nconst uploadConfig = {\r\n  uploadApiUrl: process.env.REACT_APP_UPLOAD_URL,\r\n  clientId: process.env.REACT_APP_CLIENT_ID,\r\n  clientSecret: process.env.REACT_APP_CLIENT_SECRET\r\n};\r\n```\r\n\r\n## Migration from Environment Variables\r\n\r\nIf you were previously using environment variables directly (VITE\\_\\* variables), update your configuration:\r\n\r\n**Before:**\r\n\r\n```javascript\r\n// .env\r\nVITE_UPLOAD_API_URL=https://api.example.com/upload\r\nVITE_CLIENT_ID=client123\r\nVITE_CLIENT_SECRET=secret456\r\n\r\n// No explicit config needed - read automatically\r\n<DZRichTextEditor value={content} onChange={setContent} />\r\n```\r\n\r\n**After:**\r\n\r\n```javascript\r\n// .env\r\nREACT_APP_UPLOAD_URL=https://api.example.com/upload\r\nREACT_APP_CLIENT_ID=client123\r\nREACT_APP_CLIENT_SECRET=secret456\r\n\r\n// Explicit config required\r\nconst uploadConfig = {\r\n  uploadApiUrl: process.env.REACT_APP_UPLOAD_URL,\r\n  clientId: process.env.REACT_APP_CLIENT_ID,\r\n  clientSecret: process.env.REACT_APP_CLIENT_SECRET\r\n};\r\n\r\n<DZRichTextEditor\r\n  value={content}\r\n  onChange={setContent}\r\n  uploadConfig={uploadConfig}\r\n/>\r\n```\r\n\r\n## Keyboard Shortcuts\r\n\r\n| Shortcut       | Action              |\r\n| -------------- | ------------------- |\r\n| `Ctrl/Cmd + B` | Bold                |\r\n| `Ctrl/Cmd + I` | Italic              |\r\n| `Ctrl/Cmd + U` | Underline           |\r\n| `Ctrl/Cmd + L` | Align Left          |\r\n| `Ctrl/Cmd + E` | Align Center        |\r\n| `Ctrl/Cmd + R` | Align Right         |\r\n| `Ctrl/Cmd + J` | Justify             |\r\n| `Ctrl/Cmd + 1` | Single Line Spacing |\r\n| `Ctrl/Cmd + 2` | Double Line Spacing |\r\n| `Ctrl/Cmd + 5` | 1.5 Line Spacing    |\r\n| `Tab`          | Increase Indent     |\r\n| `Shift + Tab`  | Decrease Indent     |\r\n\r\n## Browser Support\r\n\r\n- Chrome 80+\r\n- Firefox 75+\r\n- Safari 13+\r\n- Edge 80+\r\n\r\n## Contributing\r\n\r\nContributions are welcome! Please feel free to submit issues and pull requests.\r\n\r\n## License\r\n\r\nMIT License - see LICENSE file for details.\r\n\r\n## Version History\r\n\r\n### v1.3.0\r\n\r\n- ✨ Added configurable upload system via props\r\n- 🖼️ Implemented image resize functionality\r\n- 🧹 Clean HTML output (no editor artifacts)\r\n- 📦 Prepared for npm package distribution\r\n- 🔧 Added TypeScript definitions\r\n\r\n### v1.2.0\r\n\r\n- 🎨 Advanced table styling and resizing\r\n- 📱 Improved responsive design\r\n- ⚡ Performance optimizations\r\n\r\n### v1.1.0\r\n\r\n- 🖼️ Image upload via drag & drop and paste\r\n- 🔗 Enhanced link management\r\n- 🎯 Improved toolbar customization\r\n\r\n### v1.0.0\r\n\r\n- 🎉 Initial release\r\n- ✨ Core rich text editing features\r\n- 🎨 Tailwind CSS integration\r\n","readmeFilename":"README.md","_rev":"1-a4c6cc838429f224f2a99805fda8ef8a"}