{"_id":"@akshaykotish/page","_rev":"3-0f14528a81a21f3d05dd3e3f7370aff3","name":"@akshaykotish/page","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@akshaykotish/page","version":"1.0.0","keywords":["react","page","editor","renderer","content","blocks"],"license":"MIT","_id":"@akshaykotish/page@1.0.0","maintainers":[{"name":"akshaykotish","email":"akshaykotish@gmail.com"}],"dist":{"shasum":"0eda29fec2cb286e376c50c7b4dfea0fd7740c2b","tarball":"https://registry.npmjs.org/@akshaykotish/page/-/page-1.0.0.tgz","fileCount":8,"integrity":"sha512-lxeUhJnOYdtvY//9PpbkIcjyMfGWxIe7DdxTp5vN446cEHwSl3m9Or5CWaI7lRaqJ0k55DyJ+Aoh9o6OgpVx1A==","signatures":[{"sig":"MEYCIQC+Knw0RW76X0YAT/NA7qP9ZI0fOfcQSBJLxeYhXc4z9AIhAJJN2cQAxO+YObkiPNMvqHwul4U7EexZVnOXElBz1Bpw","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":130567},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"fdfdfce70eb63293b7ab74a893b174bfbf69fbc5","scripts":{"build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"akshaykotish","email":"akshaykotish@gmail.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.9.0","description":"A React component for rendering and editing content page by page","directories":{},"_nodeVersion":"24.14.0","_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","rollup":"^4.0.0","react-dom":"^18.2.0","@babel/core":"^7.24.0","@babel/preset-env":"^7.24.0","@babel/preset-react":"^7.24.0","@rollup/plugin-babel":"^6.0.0","@rollup/plugin-terser":"^0.4.0","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^25.0.0","@rollup/plugin-node-resolve":"^15.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/page_1.0.0_1775060800211_0.6945581369206493","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@akshaykotish/page","version":"1.0.1","keywords":["react","page","editor","renderer","content","blocks"],"license":"MIT","_id":"@akshaykotish/page@1.0.1","maintainers":[{"name":"akshaykotish","email":"akshaykotish@gmail.com"}],"dist":{"shasum":"77363bb40fc0457458adbb965ba988cc1f417117","tarball":"https://registry.npmjs.org/@akshaykotish/page/-/page-1.0.1.tgz","fileCount":8,"integrity":"sha512-Dhh43vAUQyfWd8bEaQc9XFbjmDWJBBjgT+D+JvuyfSwFo7lw0Q0fLWC3uASeULsXSNcVeH4TSGB2Kq+lbvQSvg==","signatures":[{"sig":"MEYCIQDMTxX6J03KYzjd8PyHgu9tapja8a5tFKay+06zMX4cSwIhANII3ui57Y5BwXStCda2lxSQe/o+LVEf050lljqtwV2e","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":130576},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"fdfdfce70eb63293b7ab74a893b174bfbf69fbc5","scripts":{"build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"akshaykotish","email":"akshaykotish@gmail.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.9.0","description":"A React component for rendering and editing content page by page","directories":{},"_nodeVersion":"24.14.0","_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","rollup":"^4.0.0","react-dom":"^18.2.0","@babel/core":"^7.24.0","@babel/preset-env":"^7.24.0","@babel/preset-react":"^7.24.0","@rollup/plugin-babel":"^6.0.0","@rollup/plugin-terser":"^0.4.0","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^25.0.0","@rollup/plugin-node-resolve":"^15.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/page_1.0.1_1775060894262_0.6495183734180554","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@akshaykotish/page","version":"1.1.0","description":"A React component for rendering and editing content page by page","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","prepublishOnly":"npm run build"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"devDependencies":{"@babel/core":"^7.24.0","@babel/preset-env":"^7.24.0","@babel/preset-react":"^7.24.0","@rollup/plugin-babel":"^6.0.0","@rollup/plugin-commonjs":"^25.0.0","@rollup/plugin-node-resolve":"^15.0.0","@rollup/plugin-terser":"^0.4.0","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2"},"keywords":["react","page","editor","renderer","content","blocks"],"license":"MIT","repository":{"type":"git","url":""},"dependencies":{"html2canvas":"^1.4.1","jspdf":"^4.2.1"},"gitHead":"4211a7a4449679887d8320c57aabc4c6d3cd6497","_id":"@akshaykotish/page@1.1.0","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-Vm/lOuDIZPVTH+JY80b912xI8E3dxhzND1q7lxb1chUirvCXk5SM1fnyLZJWNS15635S/3E5WPk3TtXJUk3V1A==","shasum":"8055d274e08d230f963ecbcef536b59ac4fccfad","tarball":"https://registry.npmjs.org/@akshaykotish/page/-/page-1.1.0.tgz","fileCount":8,"unpackedSize":331291,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC80YZPtotj0Xm2s3r+M/Ga+vFh2m2XZ+qLGZMQ/TWJCQIgbJIARQQOWKSFRCqek3gBWeDe2aYZKxzzBBYUUnUsKps="}]},"_npmUser":{"name":"akshaykotish","email":"akshaykotish@gmail.com"},"directories":{},"maintainers":[{"name":"akshaykotish","email":"akshaykotish@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/page_1.1.0_1775152379995_0.2683341568731936"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-01T16:26:40.094Z","modified":"2026-04-02T17:53:00.267Z","1.0.0":"2026-04-01T16:26:40.346Z","1.0.1":"2026-04-01T16:28:14.420Z","1.1.0":"2026-04-02T17:53:00.154Z"},"license":"MIT","keywords":["react","page","editor","renderer","content","blocks"],"repository":{"type":"git","url":""},"description":"A React component for rendering and editing content page by page","maintainers":[{"name":"akshaykotish","email":"akshaykotish@gmail.com"}],"readme":"# Page\n\nA React component for rendering and editing content page by page with **auto-pagination**. Content automatically flows across page containers based on real page dimensions (A4, Letter, etc.) — when a page fills up, remaining content breaks into the next page.\n\n## Installation\n\n```bash\nnpm install @akshaykotish/page\n```\n\n## Quick Start\n\n```jsx\nimport { Page } from \"@akshaykotish/page\";\nimport \"@akshaykotish/page/dist/page.css\";\n\nconst data = {\n  pages: [\n    {\n      id: \"page-1\",\n      blocks: [\n        { id: \"b1\", type: \"heading\", content: \"Hello World\", level: 1 },\n        { id: \"b2\", type: \"paragraph\", content: \"This is a paragraph of text.\" },\n      ],\n    },\n  ],\n};\n\n// Read-only mode\n<Page data={data} edit={false} />\n\n// Editor mode\n<Page data={data} edit={true} onChange={(updated) => console.log(updated)} />\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `data` | `object` | required | Content data with `pages` array containing `blocks` |\n| `edit` | `boolean` | `false` | Enable editing mode |\n| `onChange` | `function` | — | Callback fired with updated data on every edit |\n| `layout` | `\"grid\" \\| \"tabs\"` | `\"grid\"` | `grid` shows all pages vertically, `tabs` shows one at a time |\n| `pageSize` | `string` | `\"A4\"` | Page dimensions — `A4`, `A3`, `Letter`, `Legal`, `Tabloid`, `A5` |\n| `padding` | `object` | `{ top: 60, bottom: 60, left: 48, right: 48 }` | Container padding in pixels |\n| `className` | `string` | `\"\"` | Additional CSS class for the root element |\n\n## Page Sizes\n\n| Size | Dimensions | Pixels (96 DPI) |\n|------|-----------|-----------------|\n| A4 | 210 × 297 mm | 794 × 1123 |\n| A3 | 297 × 420 mm | 1123 × 1587 |\n| US Letter | 8.5 × 11 in | 816 × 1056 |\n| US Legal | 8.5 × 14 in | 816 × 1344 |\n| Tabloid | 11 × 17 in | 1056 × 1632 |\n| A5 | 148 × 210 mm | 559 × 794 |\n\n## Auto-Pagination\n\nAll blocks from the input data are treated as a single content stream. The component:\n\n1. Measures each block's rendered height\n2. Fills each page container up to `pageHeight - paddingTop - paddingBottom - headerHeight`\n3. When a page is full, remaining blocks flow into the next container\n4. Changing the page size or padding re-flows content automatically\n\n```\n┌─────────────────────────────┐\n│       padding-top            │\n│  ┌───────────────────────┐  │\n│  │  PAGE 1               │  │\n│  ├───────────────────────┤  │\n│  │                       │  │\n│  │  Content (auto height │  │\n│  │  up to max allowed)   │  │\n│  │                       │  │\n│  └───────────────────────┘  │\n│       padding-bottom         │\n└─────────────────────────────┘\n\n┌─────────────────────────────┐\n│       padding-top            │\n│  ┌───────────────────────┐  │\n│  │  PAGE 2               │  │\n│  ├───────────────────────┤  │\n│  │                       │  │\n│  │  Overflow content     │  │\n│  │  continues here...    │  │\n│  │                       │  │\n│  └───────────────────────┘  │\n│       padding-bottom         │\n└─────────────────────────────┘\n```\n\n## Block Types\n\n### Heading\n```js\n{ id: \"1\", type: \"heading\", content: \"Title\", level: 1 }\n```\nLevels 1–6 supported. In edit mode, a dropdown selects the heading level.\n\n### Paragraph\n```js\n{ id: \"2\", type: \"paragraph\", content: \"Some text here.\" }\n```\n\n### Image\n```js\n{ id: \"3\", type: \"image\", src: \"https://example.com/photo.jpg\", alt: \"Description\", caption: \"Optional caption\" }\n```\n\n### List\n```js\n{ id: \"4\", type: \"list\", items: [\"First item\", \"Second item\"], ordered: false }\n```\nSet `ordered: true` for numbered lists.\n\n### Code\n```js\n{ id: \"5\", type: \"code\", content: \"console.log('hello')\", language: \"javascript\" }\n```\n\n### Quote\n```js\n{ id: \"6\", type: \"quote\", content: \"To be or not to be.\", author: \"Shakespeare\" }\n```\n\n### Divider\n```js\n{ id: \"7\", type: \"divider\" }\n```\n\n### Table\n```js\n{ id: \"8\", type: \"table\", headers: [\"Name\", \"Age\"], rows: [[\"Alice\", \"30\"], [\"Bob\", \"25\"]] }\n```\n\n## Edit Mode Features\n\nWhen `edit={true}`:\n\n- **Inline editing** — click any text to edit directly\n- **Block toolbar** — hover a block to reveal controls (appears on hover)\n- **Change block type** — hamburger menu to convert between block types\n- **Reorder** — move blocks up/down with arrow buttons\n- **Add/Delete** — add new blocks below or remove existing ones\n- **Page size dropdown** — switch page dimensions and watch content re-flow\n\n## Running the Demo\n\n```bash\ngit clone https://github.com/akshaykotish/Page.git\ncd Page\nnpm install\nnpm run build\nnode demo/server.js\n```\n\nOpen **http://127.0.0.1:9999** in your browser. Click \"Edit Mode\" to toggle editing.\n\n## Building\n\n```bash\nnpm run build\n```\n\nOutputs to `dist/`:\n- `index.js` — CommonJS bundle\n- `index.esm.js` — ES module bundle\n- `page.css` — Stylesheet\n\n## License\n\n[MIT](LICENSE)\n","readmeFilename":"README.md"}