CM Page Builder

Now with Next.js support

A Notion inspired page builder

CM Page builder is a modern rich text component based page builder inspired from Notion. 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 📝

Download and Install CM Page Builder

Install from npm

npm install -s @commutatus/cm-page-builder

Load CM Page Builder as a Module

import PageBuilder from '@commutatus/cm-page-builder'

Initialization and Usage

An Example of using page builder component:

<PageBuilder
	pageComponents={pageComponents}
	typeMapping={TYPE_MAP_COMPONENT}
	handleUpdate={this._updatePageComponent}
	status={this.state.status}
	requestHandler={this.requestHandler}
	options={[['Header1','Header2','Olist','Ulist']}
/>

Component Props | --------------------| pageComponents | typeMapping | options | handleUpdate | status |

Page components.

A list of Page components, to be initialized. They have the following structure

{
  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