# cm-page-builder-test
> Page builder package like notion
Latest version **1.4.10** (published 2023-08-31) · ISC license · 0 weekly downloads
## Install
```sh
npm install cm-page-builder-test
pnpm add cm-page-builder-test
yarn add cm-page-builder-test
bun add cm-page-builder-test
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; large bundle.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.4.10 |
| Published | 2023-08-31 |
| First published | 2023-08-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 28 |
| Unpacked size | 9.6 MB |
| Known vulnerabilities | 0 (+9 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 36 |
| Author | Surendhar |
| Maintainers | gurpal_singh |
## Links
- npm: https://www.npmjs.com/package/cm-page-builder-test
- Repository: https://github.com/commutatus/cm-page-builder
- Homepage: https://github.com/commutatus/cm-page-builder#readme
- Issues: https://github.com/commutatus/cm-page-builder/issues
- npm.io page: https://npm.io/package/cm-page-builder-test
## Dependencies (28)
- [uuid](https://npm.io/package/uuid.md) ^3.3.2
- [react](https://npm.io/package/react.md) ^16.12.0
- [redux](https://npm.io/package/redux.md) ^4.0.1
- [moment](https://npm.io/package/moment.md) ^2.24.0
- [express](https://npm.io/package/express.md) ^4.17.1
- [emoji-js](https://npm.io/package/emoji-js.md) ^3.4.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.12.0
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [emoji-mart](https://npm.io/package/emoji-mart.md) ^2.11.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [sortablejs](https://npm.io/package/sortablejs.md) ^1.10.0-rc3
- [compression](https://npm.io/package/compression.md) ^1.7.4
- [react-redux](https://npm.io/package/react-redux.md) ^7.1.0
- [redux-thunk](https://npm.io/package/redux-thunk.md) ^2.3.0
- [highlight.js](https://npm.io/package/highlight.js.md) ^10.1.1
- [react-helmet](https://npm.io/package/react-helmet.md) ^5.2.1
- [redux-logger](https://npm.io/package/redux-logger.md) ^3.0.6
- [style-loader](https://npm.io/package/style-loader.md) ^0.23.1
- [activestorage](https://npm.io/package/activestorage.md) ^5.2.3
- [sanitize-html](https://npm.io/package/sanitize-html.md) ^1.20.1
- [react-dropzone](https://npm.io/package/react-dropzone.md) 10.1.9
- [node-html-parser](https://npm.io/package/node-html-parser.md) 1.1.18
- [react-svg-loader](https://npm.io/package/react-svg-loader.md) ^3.0.3
- [is-data-descriptor](https://npm.io/package/is-data-descriptor.md) ^2.0.0
- [is-accessor-descriptor](https://npm.io/package/is-accessor-descriptor.md) ^3.0.1
- [react-transition-group](https://npm.io/package/react-transition-group.md) ^4.3.0
- [react-syntax-highlighter](https://npm.io/package/react-syntax-highlighter.md) ^12.2.1
- [react-circular-progressbar](https://npm.io/package/react-circular-progressbar.md) ^2.0.2
## Recent versions
- 1.4.10 (latest) — 2023-08-31
- 0.0.2 (test-1) — 2023-08-31
- 1.4.1 (test) — 2023-08-30
- 0.0.1 — 2023-08-31
- 1.1.2 — 2023-08-31
- 1.1.1 — 2023-08-31
- 1.1.0 — 2023-08-31
- 1.0.2 — 2023-08-30
- 1.0.1 — 2023-08-30
- 1.0.0 — 2023-08-30
- 1.4.3 — 2023-08-30
- 1.4.2 — 2023-08-30
## README
# CM Page Builder
### A Notion inspired page builder
CM Page builder is a modern rich text component based page builder inspired from [Notion](https://www.notion.so/). This Component allows you to compose awesome, formatted text in your web application and supports uploading files, pictures, code snippets and even embedding videos.
### Demo:
[CM Page Builder 📝](http://cm-page-builder.herokuapp.com/)
## Download and Install CM Page Builder
### Install from npm
```
npm install -s cm-page-builder
```
### Load CM Page Builder as a Module
```javascript
import PageBuilder from 'cm-page-builder'
```
### Initialization and Usage
An Example of using page builder component:
```JSX
```
Component Props |
--------------------|
pageComponents |
typeMapping |
options |
handleUpdate |
status |
##### Page components.
A list of Page components, to be initialized. They have the following structure
```javascript
{
component_attachment: { content: String, filename: String, url: String}
component_type: String
content: String
position: Number
}
```
##### Status (default: `Edit`):
Has to be one of `Edit` or `Read`
##### options (default: `['Header1','Header2','Olist','Ulist','Embed','Upload', 'File','Divider','Code']`):
Array of available components. For example, setting options as `['Header1']` will only render `Header1` component.
##### handleUpdate(id, data, type, key):
A `function` that gets fired every time something happens with the components of a page. It receives four parameters, `id`, `data`, `type`, `key`
- `id`: The ID of the component,
- `data`: The data inside the component.
- `type`: The kind of change that has happened with the component. It can be any of
- `"createComponent"`
- `"updateComponent"`
- `"deleteComponent"`
- `key`: `undefined`
##### typeMapping
A hash that maps snake_cased names of components with cm-page-builder components
found inside the src/components folder. Available components are
- `Header1`: The equivalent of a h1 tag
- `Header2`: The equivalent of a h2 tag
- `OList`: An ordered list. Two or more adjacent components of this type will make a group, and the position number will increase sequentially within that group
- `UList`: An unordered list
- `Text`: The default component, regular text. It may have HTML formatting
- `Embed`: A vimeo or youtube video which is meant to be displayed as an embed file
- `Upload`: A file. `component_attachment` will hold all relevant information. If it is an image, it should be displayed as an embedded image
- `Divider`: A line divider.
- `Code`: A code snippet component.
### Crafted with ❤️ by [Commutatus](https://www.commutatus.com)
---
_Source: https://npm.io/package/cm-page-builder-test · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._