Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/commutatus/cm-page-builder
Page builder package like notion
https://github.com/commutatus/cm-page-builder
editor medium notion reactjs rich-text-editor
Last synced: about 2 months ago
JSON representation
Page builder package like notion
- Host: GitHub
- URL: https://github.com/commutatus/cm-page-builder
- Owner: commutatus
- Created: 2019-05-15T06:21:39.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-08-31T14:56:41.000Z (over 1 year ago)
- Last Synced: 2024-10-20T11:24:06.775Z (2 months ago)
- Topics: editor, medium, notion, reactjs, rich-text-editor
- Language: JavaScript
- Homepage:
- Size: 19.2 MB
- Stars: 34
- Watchers: 11
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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)